01.gif

一、新建一个div水平居中

二、div装3个圆

三、对div进行flex布局

四、需要一个左右移动的影子

  1. .circle:nth-child(2){
  2.     box-shadow: 350px 0px 0px yellow;
  3. }
  1. //动画
  2. @keyframes changePs{
  3.   from{
  4.     box-shadow: 350px 0px 0px yellow;
  5.   }
  6.   to{
  7.     box-shadow: -350px 0px 0px yellow;
  8.   }
  9. }
  11. .circle:nth-child(2){
  12.   animation:changePs 2s infinite alternate linear 
  13.    /* 无限循环   交替的  匀速的*/
  14. }

五、filter //滤镜

  1. .item{
  2.   filter:blur(20px) contrast(20)
  3.   /* 高斯模糊  对比度 */
  4. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         body{
  10.             margin:0;padding:0;
  11.             background: #000;
  12.         }
  13.         .item{
  14.             width:600px;
  15.             height:600px;
  16.             background: #000;
  17.             margin-left: auto;
  18.             margin-right: auto;
  19.             display:flex;
  20.             justify-content: space-around;
  21.             align-items: center;
  22.             filter:blur(20px) contrast(20)
  23.             /* 高斯模糊  对比度 */
  24.         }
  25.         .circle{
  26.             width:96px;
  27.             height:96px;
  28.             background: #fff;
  29.             border-radius: 50%;
  30.         }
  31.         .circle:nth-child(2){
  32.             animation:changePs 1.5s infinite alternate linear 
  33.             /* 无限循环   交替的  匀速的*/
  34.         }
  35.         @keyframes changePs{
  36.             from{
  37.                 box-shadow: 350px 0px 0px #fff;
  38.             }
  39.             to{
  40.                 box-shadow: -350px 0px 0px #fff;
  41.             }
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="item">
  47.         <div class="circle"></div>
  48.         <div class="circle"></div>
  49.         <div class="circle"></div>
  50.     </div>
  51. </body>
  52. </html>