123456780123456780123456780

123456780123456780123456780123456780

view source

JavaScript


  
CSS

  
#area{
  width:200px;
  height:120px;
  margin:40px;
  overflow:hidden;
  position:relative;
  left:0;
  top:0;
}
#face{
  position:absolute;
  left:50%;
  margin-top:40px;
  margin-left:-40px;
  text-align:center;
  animation: zengo1 80ms linear 0s infinite alternate;
}

#face img{
  width:80px;
  border-radius:50%;
}
p{
  font-size:40px;
}
#p1,
#p2{
  position:absolute;
  left:0;
  
}
#p1{
  top:0;
  animation: anime1 1s linear 0s infinite;
}
#p2{
  bottom:0;
  animation: anime2 1s linear 0s infinite;
}

#tin{
  position:absolute;
  height:12px;
  width:60px;
  border-radius:0 0 6px 6px;
  left:0;
  bottom:30px;
  background-color:rgb(255, 229, 214);

}

@keyframes anime1 {
  0% { left:-80%;}
  100% { left:0;}
}
@keyframes anime2 {
  0% { left:0;}
  100% { left:-80%;}
}

@keyframes zengo1 {
  0% { left:30%;}
  100% { left:70%;}
}



  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-css/css-marquee-text/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。