css3検索待機アニメーション効果コード?学ぶ価値がある-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3検索待機アニメーション効果コード?学ぶ価値がある

云罗郡主

Oct 16, 2018 pm 03:10 PM

この記事の内容は css3 の検索待機アニメーションのコードです。必要な方は参考にしていただければ幸いです。

【関連ビデオの推奨: ブートストラップチュートリアル】

<html>
  <head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_720452_mhj331xuxd8.css">
    <style>
      *{
          margin:0;
          padding:0;
      }
      .load-icon{
          left:0;
          right:0;
          bottom:0;
          top:0;
          margin:auto;
          display: flex;
          justify-content: center;
          align-items: center;
          position:fixed;
      }
      .load-icon>div{
          width: 100px;
          height:100px;
          border-radius:50%;
          border:8px solid transparent;
          border-left-color:rgba(35, 196, 81,1);
          animation: animate 1s linear infinite;
      }
      .load-icon>span{
          position: absolute;
          color:#fff;
          text-shadow: 1px 3px 5px #333;
          width: 80px;
          height:80px;
          border:8px solid transparent;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .load-icon>span>i{
          font-size:50px;
          animation: animate1 3s linear infinite;
      }
      .load-icon>span>span{
          font-size:50px;
          animation: shadow 3s linear infinite;
          color:rgba(35, 196, 81,1);
          overflow: hidden;
          position:absolute;
          top:13px;
      }
      @keyframes animate{
          0% { transform: rotate(0deg) ;box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1)}
          50% { box-shadow:inset 0 0 5px  rgba(35, 196, 81,1) }
          100% { transform: rotate(360deg);box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1) }
      }
      @keyframes animate1{
          0% { transform:translate3d(150%,0,0);}
          30% { transform:translate3d(0%,0,0);}
          70% { transform:translate3d(0%,0,0);}
          100% { transform:translate3d(-150%,0,0);}
      }
      @keyframes shadow{
          0% {transform:translate3d(150%,0,0); height:0%}
          30% { transform:translate3d(0%,0,0); height:0%}
          70% { transform:translate3d(0%,0,0);height:100%}
          100% {transform:translate3d(-150%,0,0);height:100%}
      }
    </style>
  </head>
  <body>
    <div class="load-icon">
      <span>
        <i class="iconfont icon-sousuo"></i>
        <span class="iconfont icon-sousuo"></span>
      </span>
      <div></div>
    </div>
  </body>
</html>

ログイン後にコピー

上記は、CSS3 検索待機アニメーション効果コードの完全な紹介です。もっと知りたい CSS ビデオチュートリアル の詳細については、PHP 中国語 Web サイトに注目してください。

以上がcss3検索待機アニメーション効果コード?学ぶ価値があるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。