整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS3 3D立方體旋轉發光動畫特效
          
        
           
          
	
	
          
		CSS3 3D立方體旋轉發光動畫特效
          
                        
          多代碼特效加HTML5前端學習交流群.581549454
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>CSS3 3D立方體旋轉發光動畫特效</title>
          <style>
          body {
          margin: 0;
          overflow: hidden;
          width: 100vw;
          height: 100vh;
          background: #222;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          }
          .world {
          -webkit-perspective: 800px;
          perspective: 800px;
          width: 100vh;
          height: 100vh;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          }
          .cube {
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          width: 50vh;
          height: 50vh;
          position: relative;
          -webkit-animation: rotator 4.5s linear infinite;
          animation: rotator 4.5s linear infinite;
          outline: 0;
          }
          .cube * {
          background: #000;
          box-shadow: 0 0 3vh currentColor;
          -webkit-transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
          transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
          }
          .cube:hover * {
          background: currentColor;
          box-shadow: 0 0 20vh currentColor;
          }
          .cube .cube__front {
          color: deeppink;
          -webkit-transform: translateZ(25vh);
          transform: translateZ(25vh);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          }
          .cube .cube__right {
          color: lightcoral;
          -webkit-transform: rotateY(90deg) translateZ(25vh);
          transform: rotateY(90deg) translateZ(25vh);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          }
          .cube .cube__left {
          color: skyblue;
          -webkit-transform: rotateY(270deg) translateZ(25vh);
          transform: rotateY(270deg) translateZ(25vh);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          }
          .cube .cube__back {
          color: seagreen;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          -webkit-transform: rotateY(180deg) translateZ(25vh);
          transform: rotateY(180deg) translateZ(25vh);
          }
          .cube .cube__top {
          color: mediumseagreen;
          -webkit-transform: rotateX(90deg) translateZ(25vh);
          transform: rotateX(90deg) translateZ(25vh);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          }
          .cube .cube__bottom {
          color: dodgerblue;
          -webkit-transform: rotateX(270deg) translateZ(25vh);
          transform: rotateX(270deg) translateZ(25vh);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          }
          @-webkit-keyframes rotator {
          0% {
          -webkit-transform: rotateX(0deg) rotateY(0deg);
          transform: rotateX(0deg) rotateY(0deg);
          }
          100% {
          -webkit-transform: rotateX(360deg) rotateY(360deg);
          transform: rotateX(360deg) rotateY(360deg);
          }
          }
          @keyframes rotator {
          0% {
          -webkit-transform: rotateX(0deg) rotateY(0deg);
          transform: rotateX(0deg) rotateY(0deg);
          }
          100% {
          -webkit-transform: rotateX(360deg) rotateY(360deg);
          transform: rotateX(360deg) rotateY(360deg);
          }
          }
          </style>
          </head>
          <body>
          <div class="world">
          <div class="cube" tabindex="0">
          <div class="cube__front"></div>
          <div class="cube__back"></div>
          <div class="cube__left"></div>
          <div class="cube__right"></div>
          <div class="cube__top"></div>
          <div class="cube__bottom"></div>
          </div>
          </div>
          </body>
          </html>
          現效果視頻：
          https://m.toutiaoimg.com/i7012628289806139918/?gd_ext_json=%7B%22enter_from%22%3A%22click_creation_center%22%2C%22category_name%22%3A%22creation_center%22%7D&enter_from=click_creation_center&category_name=creation_center&share_token=c3b59c5c-c95d-43a9-a842-4cd30e321a34&tt_from=copy_link&utm_source=copy_link&utm_medium=toutiao_android&utm_campaign=client_share
          實現代碼：
          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>旋轉、縮放</title>

  <style type="text/css">
    .box {
      width: 750px;
      height: 520px;
      margin: 50px auto;
      background-image: url(狼王-靈夢狼王.jpg);
      position: relative;
      /* 溢出隱藏 */
      overflow: hidden;

    }

    .box img {
      /* 設置圖片位置 */
      position: absolute;
      top: 0;
      left: 0;
    }

    .img1 {
      z-index: 100;
      /* 動畫 */
      animation: image1 2s linear 1s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image1 {
      0% {
        transform: scale(1);
      }

      50% {
        /* 縮放，縮小 */
        transform: scale(0.5);
      }

      100% {
        transform: scale(0.0001);
      }
    }

    .img2 {
      z-index: 98;
      /* 動畫 */
      animation: image2 2s linear 3s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image2 {
      0% {
        transform: scale(1);
      }

      50% {
        /* 縮放，縮小 */
        transform: scale(1.5);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: scale(5);
        opacity: 0;
      }
    }

    .img3 {
      z-index: 97;
      /* 動畫 */
      animation: image3 2s linear 5s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image3 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotate(360deg);
        opacity: 0;
      }
    }

    .img4 {
      z-index: 96;
      /* 動畫 */
      animation: image4 2s linear 7s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image4 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-180deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotate(-360deg);
        opacity: 0;
      }
    }

    .img5 {
      z-index: 95;
      /* 動畫 */
      animation: image5 2s linear 9s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image5 {
      0% {
        /* 繞y軸旋轉 */
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(-90deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateY(-180deg);
        opacity: 0;
      }
    }

    .img6 {
      z-index: 94;
      /* 動畫 */
      animation: image6 2s linear 11s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image6 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(90deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateY(180deg);
        opacity: 0;
      }
    }

    .img7 {
      z-index: 93;
      /* 動畫 */
      animation: image7 2s linear 13s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image7 {
      0% {
        transform: rotateZ(0deg);
      }

      50% {
        transform: rotateZ(180deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateZ(360deg);
        opacity: 0;
      }
    }

    .img8 {
      z-index: 92;
      /* 動畫 */
      animation: image8 2s linear 15s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image8 {
      0% {
        transform: rotateZ(0deg);
      }

      50% {
        transform: rotateZ(-180deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateZ(-360deg);
        opacity: 0;
      }
    }

    .img9 {
      z-index: 91;
      /* 動畫 */
      animation: image9 2s linear 17s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image9 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(-90deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateX(-180deg);
        opacity: 0;
      }
    }

    .img10 {
      z-index: 90;
      /* 動畫 */
      animation: image10 2s linear 19s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image10 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(90deg);
        /* 設置不透明度 */
        opacity: 1;
      }

      100% {
        transform: rotateX(180deg);
        opacity: 0;
      }
    }

    .img11 {
      z-index: 89;
      /* 動畫 */
      animation: image11 2s linear 21s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: top;
    }

    @keyframes image11 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img12 {
      z-index: 88;
      /* 動畫 */
      animation: image12 2s linear 23s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: top;
    }

    @keyframes image12 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img13 {
      z-index: 87;
      /* 動畫 */
      animation: image13 2s linear 25s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: top;
    }

    @keyframes image13 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(-45deg);
      }

      100% {
        transform: rotateX(-90deg);
      }
    }

    .img14 {
      z-index: 86;
      /* 動畫 */
      animation: image14 2s linear 27s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: top;
    }

    @keyframes image14 {
      0% {
        transform: rotateX(0deg);
        /* 設置模糊度 */
        filter: blur(0px);
      }

      50% {
        transform: rotateX(45deg);
      }

      100% {
        transform: rotateX(90deg);
        filter: blur(1);
      }
    }

    .img15 {
      z-index: 85;
      /* 動畫 */
      animation: image15 2s linear 29s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: bottom;
    }

    @keyframes image15 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img16 {
      z-index: 84;
      /* 動畫 */
      animation: image16 2s linear 31s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: bottom;
    }

    @keyframes image16 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img17 {
      z-index: 83;
      /* 動畫 */
      animation: image17 2s linear 33s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: bottom;
    }

    @keyframes image17 {
      0% {
        transform: rotateX(0deg);
      }

      50% {
        transform: rotateX(45deg);
      }

      100% {
        transform: rotateX(90deg);
      }
    }

    .img18 {
      z-index: 82;
      /* 動畫 */
      animation: image18 2s linear 35s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: bottom;
    }

    @keyframes image18 {
      0% {
        transform: rotateX(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateX(-45deg);
      }

      100% {
        transform: rotateX(-90deg);
        filter: blur(1px);
      }
    }

    .img19 {
      z-index: 81;
      /* 動畫 */
      animation: image19 2s linear 37s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: left;
    }

    @keyframes image19 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img20 {
      z-index: 80;
      /* 動畫 */
      animation: image20 2s linear 39s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: left;
    }

    @keyframes image20 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img21 {
      z-index: 79;
      /* 動畫 */
      animation: image21 2s linear 41s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: left;
    }

    @keyframes image21 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(45deg);
      }

      100% {
        transform: rotateY(90deg);
      }
    }

    .img22 {
      z-index: 78;
      /* 動畫 */
      animation: image22 2s linear 43s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: left;
    }

    @keyframes image22 {
      0% {
        transform: rotateY(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateY(-45deg);
      }

      100% {
        transform: rotateY(-90deg);
        filter: blur(1px);
      }
    }

    .img23 {
      z-index: 77;
      /* 動畫 */
      animation: image23 2s linear 45s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: right;
    }

    @keyframes image23 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);
      }

      100% {
        transform: rotate(-180deg);
      }
    }

    .img24 {
      z-index: 76;
      /* 動畫 */
      animation: image24 2s linear 47s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: right;
    }

    @keyframes image24 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);
      }

      100% {
        transform: rotate(180deg);
      }
    }

    .img25 {
      z-index: 75;
      /* 動畫 */
      animation: image25 2s linear 49s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: right;
    }

    @keyframes image25 {
      0% {
        transform: rotateY(0deg);
        filter: blur(0px);
      }

      50% {
        transform: rotateY(45deg);
      }

      100% {
        transform: rotateY(90deg);
        filter: blur(1px);
      }
    }

    .img26 {
      z-index: 74;
      /* 動畫 */
      animation: image26 2s linear 51s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: right;
    }

    @keyframes image26 {
      0% {
        transform: rotateY(0deg);
      }

      50% {
        transform: rotateY(-45deg);
      }

      100% {
        transform: rotateY(-90deg);
      }
    }

    .img27 {
      z-index: 73;
      /* 動畫 */
      animation: image27 2s linear 53s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: left top;
    }

    @keyframes image27 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(90deg);

      }

      100% {
        transform: rotate(180deg);

      }
    }

    .img28 {
      z-index: 72;
      /* 動畫 */
      animation: image28 2s linear 55s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
      /* 設置旋轉原點 */
      transform-origin: right top;
    }

    @keyframes image28 {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-90deg);

      }

      100% {
        transform: rotate(-180deg);

      }
    }

    .img29 {
      z-index: 71;
      /* 動畫 */
      animation: image29 2s linear 57s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image29 {
      0% {
        transform: rotateZ(0deg) scale(1);
      }

      50% {
        transform: rotateZ(180deg) scale(0.5);

      }

      100% {
        transform: rotateZ(360deg) scale(0.0001);

      }
    }

    .img30 {
      z-index: 70;
      /* 動畫 */
      animation: image30 2s linear 59s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image30 {
      0% {
        transform: rotateX(0deg) scale(1);
      }

      50% {
        transform: rotateX(180deg) scale(0.5);

      }

      100% {
        transform: rotateX(360deg) scale(0.0001);

      }
    }

    .img31 {
      z-index: 69;
      /* 動畫 */
      animation: image31 2s linear 61s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image31 {
      0% {
        transform: rotateY(0deg) scale(1);
      }

      50% {
        transform: rotateY(180deg) scale(0.5);

      }

      100% {
        transform: rotateY(360deg) scale(0.0001);

      }
    }

    .img32 {
      z-index: 68;
      /* 動畫 */
      animation: image32 2s linear 63s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image32 {
      0% {
        transform: scaleX(1);
      }

      50% {
        transform: scaleX(0.5);
      }

      100% {
        transform: scaleX(0.0001);
      }
    }

    .img33 {
      z-index: 67;
      /* 動畫 */
      animation: image33 2s linear 65s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image33 {
      0% {
        transform: rotateY(0deg) scaleX(1);
      }

      50% {
        transform: rotateY(180deg) scaleX(0.5);
      }

      100% {
        transform: rotateY(360deg) scaleX(0.0001);
      }
    }

    .img34 {
      z-index: 66;
      /* 動畫 */
      animation: image34 2s linear 67s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image34 {
      0% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(0.5);
      }

      100% {
        transform: scaleY(0);
      }
    }

    .img35 {
      z-index: 65;
      /* 動畫 */
      animation: image35 2s linear 69s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image35 {
      0% {
        transform: rotateY(0deg) scaleY(1);
      }

      50% {
        transform: rotateY(180deg) scaleY(0.5);
      }

      100% {
        transform: rotateY(360deg) scaleY(0);
      }
    }

    .img36 {
      z-index: 64;
      /* 動畫 */
      animation: image36 2s linear 71s;
      /* 讓動畫停留在最后一幀，不回到開始處 */
      animation-fill-mode: forwards;
    }

    @keyframes image36 {
      0% {
        transform: rotate(0deg) scaleY(1);
      }

      50% {
        transform: rotate(180deg) scaleY(1.5);
        opacity: 1;
      }

      100% {
        transform: rotate(360deg) scaleY(5);
        opacity: 0;
      }
    }
   
  </style>

</head>

<body>
  <div class="box">
    <img class="img1" src="狼蛛.jpg" alt="" />
    <img class="img2" src="狼蛛-紫魅毒姬.jpg" alt="" />
    <img class="img3" src="洛神.jpg" alt="" />
    <img class="img4" src="獵魔人.jpg" alt="" />
    <img class="img5" src="獵魔人-蜂針魔女.jpg" alt="" />
    <img class="img6" src="獵魔人-原力神槍.jpg" alt="" />
    <img class="img7" src="獵魔人-摯愛甜心.jpg" alt="" />
    <img class="img8" src="羅剎郡主.jpg" alt="" />
    <img class="img9" src="羅剎郡主-玫紅冰晶.jpg" alt="" />
    <img class="img10" src="羅剎郡主-耀世神皇.jpg" alt="" />
    <img class="img11" src="羅剎郡主-櫻落飛翎.jpg" alt="" />
    <img class="img12" src="洛神-北境仙姬.jpg" alt="" />
    <img class="img13" src="洛神-飛羽女王.jpg" alt="" />
    <img class="img14" src="洛神-驚鴻仙子.jpg" alt="" />
    <img class="img15" src="綠野花仙.jpg" alt="" />
    <img class="img16" src="綠野花仙-精靈公主.jpg" alt="" />
    <img class="img17" src="綠野花仙-矩陣天翼.jpg" alt="" />
    <img class="img18" src="綠野花仙-綠夢天仙.jpg" alt="" />
    <img class="img19" src="魅魔公主.jpg" alt="" />
    <img class="img20" src="魅魔公主-煉金魔女.jpg" alt="" />
    <img class="img21" src="魅魔公主-夢有靈犀.jpg" alt="" />
    <img class="img22" src="魅魔公主-星幻少女.jpg" alt="" />
    <img class="img23" src="哪吒.jpg" alt="" />
    <img class="img24" src="哪吒-飛輪公主.jpg" alt="" />
    <img class="img25" src="哪吒-黃金威靈.jpg" alt="" />
    <img class="img26" src="哪吒-輪刃審判.jpg" alt="" />
    <img class="img27" src="哪吒-異界仙將.jpg" alt="" />
    <img class="img28" src="聶小倩.jpg" alt="" />
    <img class="img29" src="聶小倩-黛染幽情.jpg" alt="" />
    <img class="img30" src="聶小倩-勾魂燈使.jpg" alt="" />
    <img class="img31" src="聶小倩-海洋之心.jpg" alt="" />
    <img class="img32" src="聶小倩-綠影魔仙.jpg" alt="" />
    <img class="img33" src="聶小倩-仲夏清和.jpg" alt="" />
    <img class="img34" src="女武神.jpg" alt="" />
    <img class="img35" src="女武神-火羽流炎.jpg" alt="" />
    <img class="img36" src="女武神-金槍戰神.jpg" alt="" />


  </div>

</body>

</html>
          實現效果視頻：
          https://www.ixigua.com/i7012628289806139918/
          網頁設計中，動畫效果是非常重要的，它可以讓網頁更加生動、有趣，也可以提高用戶的體驗感。

          基礎圓圈旋轉動畫
          <style type="text/css">
.circle-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
<div class="circle-loader"></div>
          圓圈旋轉帶有漸變的動畫
          <style type="text/css">
.circle-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
        border-top-color: #f3f3f3;
    }

    50% {
        transform: rotate(180deg);
        border-top-color: #3498db;
    }

    100% {
        border-top-color: #f3f3f3;
        transform: rotate(360deg);
    }
}
</style>
<div class="circle-loader"></div>

          圓圈旋轉帶有陰影的動畫
          <style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  box-shadow: 0 0 10px #3498db;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="circle-loader"></div>

          圓圈旋轉帶有縮放的動畫
          <style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.8);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
</style>
<div class="circle-loader"></div>
          圓圈旋轉帶有彈跳的動畫
          <style type="text/css">
.circle-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(90deg) translateY(-20px);
  }
  50% {
    transform: rotate(180deg) translateY(0);
  }
  75% {
    transform: rotate(270deg) translateY(-20px);
  }
  100% {
    transform: rotate(360deg) translateY(0);
  }
}
</style>
<div class="circle-loader"></div>

          圓圈旋轉帶有圖片的動畫
          <style type="text/css">
.circle-loader {
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  position: relative;
}

.circle-loader:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  background-image: url("/statics/img.png");
  background-size: cover;
  border-radius: 50%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="circle-loader"></div>

          希望本文能夠對您有所幫助，感謝您的閱讀！
          人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日本一区中文字幕日本一二三区视频|
亚洲AV日韩综合一区尤物|
国产成人精品久久一区二区三区|
国产一区二区三区免费|
无码人妻久久一区二区三区免费
|
中文字幕乱码一区二区免费|
手机看片福利一区二区三区|
久久精品岛国av一区二区无码|
精品国产乱子伦一区二区三区|
国产一区在线视频观看|
日本高清不卡一区|
亚洲AV无码一区二区三区国产|
99精品一区二区免费视频|
国产精品亚洲一区二区三区久久
|
日韩一区二区三区不卡视频
|
国产精品 视频一区 二区三区|
亚洲国产一区国产亚洲|
综合人妻久久一区二区精品|
一本AV高清一区二区三区|
亚洲日本乱码一区二区在线二产线|
久久一本一区二区三区|
亚洲AV无码国产精品永久一区|
国产在线精品一区二区|
久久一区二区三区精品|
加勒比无码一区二区三区|
国产福利电影一区二区三区久久老子无码午夜伦不
|
无码毛片一区二区三区中文字幕
|
久久青青草原一区二区|
中文字幕一区二区免费
|
色一情一乱一区二区三区啪啪高|
又硬又粗又大一区二区三区视频|
动漫精品一区二区三区3d|
全国精品一区二区在线观看|
国产AⅤ精品一区二区三区久久|
日本精品少妇一区二区三区|
变态调教一区二区三区|
色欲综合一区二区三区|
国产精品一级香蕉一区|
精品免费国产一区二区|
相泽亚洲一区中文字幕|
91福利国产在线观一区二区|