CSS3 元素转圈动画 （元素旋转动画）

谁践踏了优雅 2022-11-10 01:25 265阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Document</title>
  7.         <style type="text/css">
  8.             .circle {
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 position: absolute;
  12.                 top: 50%;
  13.                 left: 50%;
  14.                 margin: -100px 0 0 -100px;
  15.             }
  17.             .circle1,
  18.             .circle2,
  19.             .circle3,
  20.             .center {
  21.                 position: absolute;
  22.                 left: 50%;
  23.                 top: 50%;
  24.                 margin: -30px 0 0 -30px;
  25.                 width: 60px;
  26.                 height: 60px;
  27.                 border-radius: 30px;
  28.                 background-color: #666666;
  29.             }
  31.             .center {
  32.                 position: absolute;
  33.                 left: 50%;
  34.                 top: 50%;
  35.                 margin: -35px 0 0 -35px;
  36.                 width: 70px;
  37.                 height: 70px;
  38.                 border-radius: 35px;
  39.                 background: #111111;
  40.                 text-align: center;
  41.                 line-height: 70px;
  42.                 color: #EAEAEA;
  43.                 font-size: 16px;
  44.             }
  46.             .circle1 {
  47.                 -webkit-animation: circle 3s linear infinite;
  48.                 animation: circle 3s linear infinite;
  49.             }
  51.             .circle2 {
  52.                 -webkit-animation: circle 3s linear 0.8s infinite;
  53.                 animation: circle 3s linear 0.8s infinite;
  54.             }
  56.             .circle3 {
  57.                 -webkit-animation: circle 3s linear 1.6s infinite;
  58.                 /* Safari and Chrome */
  59.                 animation: circle 3s linear 1.6s infinite;
  60.             }
  62.             @-webkit-keyframes circle {
  64.                 /* Safari and Chrome */
  65.                 from {
  66.                     opacity: 1;
  67.                     -webkit-transform: scale(0);
  68.                 }
  70.                 to {
  71.                     opacity: 0;
  72.                     -webkit-transform: scale(3);
  73.                 }
  74.             }
  75.         </style>
  76.     </head>
  77.     <body>
  78.         <div class="circle">
  79.             <div class="circle1"> </div>
  80.             <div class="circle2"> </div>
  81.             <div class="circle3"> </div>
  82.             <div class="center"></div>
  83.         </div>
  84.     </body>
  86. </html>

发表评论

表情：
评论列表 （有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读