code d'effet d'animation d'attente de recherche CSS3 ? Ça vaut la peine d'apprendre-tutoriel CSS-php.cn

code d'effet d'animation d'attente de recherche CSS3 ? Ça vaut la peine d'apprendre

云罗郡主

Libérer： 2018-10-16 15:43:36

avant

2402 Les gens l'ont consulté

Le contenu de cet article concerne le code d'effet d'animation en attente de recherche CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

[Recommandations vidéo associées : Tutoriel Bootstrap]

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

Copier après la connexion

Ce qui précède est une introduction complète au code d'effet d'animation d'attente de recherche CSS3, si vous Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!