美文网首页需要近期研究的项目
CSS3实现5个实用动画特效

CSS3实现5个实用动画特效

作者: 硅谷干货 | 来源:发表于2021-12-10 10:14 被阅读0次

    翻转硬币效果

    image.png
    <head>
    
      <style>
       body {
        perspective: 500px;
       }
    
       .box {
         position: relative;
         width: 300px;
         height: 300px;
         margin: 100px auto;
         transform-style: preserve-3d;
         transition: all 1s;
       }
    
       .box:hover {
         transform: rotateY(180deg);
       }
    
       .front,
       .back {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border-radius: 50%;
         font-size: 30px;
         color: #fff;
         text-align: center;
         line-height: 300px;
       }
    
       .front {
         background-color: aqua;
       }
    
       .back {
         background-color: blueviolet;
         transform: rotateY(180deg);
       }
      </style>
    </head>
    <body>
      <div class="box">
        <div class="front">我是正面</div>
        <div class="back">我是反面</div>
      </div>
    </body>
    </html>
    

    广告跑马灯特效

    image.png
    <head>
      <style>
        div {
          /* overflow: hidden; */
          font-size: 20px;
          width: 0;
          height: 30px;
          color: white;
          background-color: red;
          white-space: nowrap;
          animation: w 4s steps(10) forwards;
        }
    
        @keyframes w {
          0% {
            width: 0;
          }
          100% {
            width: 200px;
          }
        }
    
      </style>
    </head>
    <body>
      <div>
        我是广告跑马灯特效哟
      </div>
    </body>
    </html>
    

    3D导航栏

    image.png
    <head>
      <style>
       
       * {
         margin: 0;
         padding: 0;
       }
    
       ul {
         margin: 100px;
       }
    
       ul li {
        float: left;
         margin-right: 10px;
         width: 120px;
         height: 40px;
         list-style: none;
         perspective: 500px;
       }
    
       /* body {
        perspective: 500px;
       } */
    
       .box {
         position: relative;
         width: 100%;
         height: 100%;
         transform-style: preserve-3d;
         transition: all 1s;
       }
    
       .box:hover {
         transform: rotateX(90deg);
       }
    
       .front,
       .bottom {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          color: white;
          text-align: center;
          line-height: 40px;
       }
    
       .front {
         background-color: aqua;
         z-index: 1;
         transform: translateZ(20px);
       }
    
       .bottom {
         background-color: blue;
         transform: translateY(20px) rotateX(-90deg);
       }
      </style>
    </head>
    <body>
      
      <ul>
        <li>
          <div class="box">
            <div class="front">我是正面</div>
            <div class="bottom">我是底面</div>
          </div>
        </li>
        <li>
          <div class="box">
            <div class="front">我是正面</div>
            <div class="bottom">我是底面</div>
          </div>
        </li>
      </ul>
    </body>
    </html>
    

    旋转木马效果

    image.png
    <head>
      <style>
       body {
         perspective: 1000px;
       }
    
       section {
         position: relative;
         width: 200px;
         height: 150px;
         margin: 100px auto;
         transform-style: preserve-3d;
         animation: rotate 3s linear infinite;
         background: url(./images/lanhu01.jpg) no-repeat;
       }
    
       section:hover {
         /* 鼠标移入,停止动画 */
         animation-play-state: paused;
       }
    
       @keyframes rotate {
         from {
           transform: rotateY(0);
         }
         to {
           transform: rotateY(180deg);
         }
       }
    
       section div {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background: url(./images/lanhu02.jpg) no-repeat;
       }
    
       section div:nth-child(1){
         transform: rotateY(0) translateZ(200px);
       }
    
       section div:nth-child(2){
         transform: rotateY(60deg) translateZ(200px);
       }
    
       section div:nth-child(3){
         transform: rotateY(120deg) translateZ(200px);
       }
    
       section div:nth-child(4){
         transform: rotateY(180deg) translateZ(200px);
       }
    
       section div:nth-child(5){
         transform: rotateY(240deg) translateZ(200px);
       }
    
       section div:nth-child(6){
         transform: rotateY(300deg) translateZ(200px);
       }
       
      </style>
    </head>
    <body>
       <section>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </section>
    </body>
    </html>
    

    呼吸灯效果

    image.png
    <head>
      <style>
        @keyframes glow {
            from {
                border-color: #393;
                box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393;
            }
            to {
                border-color: #6f6;
                box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;
            }
        }
    
       .box{
         width: 100px;
         height: 100px;
         margin: 100px auto;
         background-color: yellow;
         animation: glow 800ms ease-out infinite alternate; 
        }
    
        .box:hover {
          animation-play-state: paused;
        }
    
        .form {
          margin: 100px auto;
          text-align: center;
        }
        
      </style>
    </head>
    <body>
    
      <div class="box"></div>
      
    </body>
    </html>
    

    以上案例直接拷贝可用,期待您的收藏

    点赞加关注,永远不迷路

    相关文章

      网友评论

        本文标题:CSS3实现5个实用动画特效

        本文链接:https://www.haomeiwen.com/subject/qxcffrtx.html