Heim > Artikel > Web-Frontend > CSS3-Suche warten Animationseffektcode? Es lohnt sich zu lernen

CSS3-Suche warten Animationseffektcode? Es lohnt sich zu lernen

云罗郡主nach vorne: 2018-10-16 15:10:012350Durchsuche

Der Inhalt dieses Artikels befasst sich mit dem CSS3-Such-Animationseffektcode. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

<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>

Das Obige ist eine vollständige Einführung in den CSS3-Such-Warteanimationseffektcode, wenn Sie möchten Ich möchte mehr wissen. Weitere Informationen zu CSS-Video-Tutorials finden Sie auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonCSS3-Suche warten Animationseffektcode? Es lohnt sich zu lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css bootstrap css3

Stellungnahme：

Dieser Artikel ist reproduziert unter:qdfuns.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementierenNächster Artikel：So verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementieren

In Verbindung stehende Artikel

Mehr sehen