效果图

normal video (1).mp4 (327.52KB).mp4%22%2C%22size%22%3A335382%2C%22percent%22%3A100%2C%22taskId%22%3A%22D8ciKN1MBYAE%22%2C%22margin%22%3Atrue%2C%22id%22%3A%228CFn1%22%2C%22videoId%22%3A%22inputs%2Fprod%2Fyuque%2F2020%2F338969%2Fmp4%2F1606374511358-0955bbd3-7d3c-435a-9826-ccd124bfbd01.mp4%22%2C%22card%22%3A%22video%22%7D#8CFn1)

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             display: flex;
  11.             justify-content: center;
  12.             align-items: center;
  13.         }
  15.         .miusicFa {
  16.             padding: 0;
  17.             list-style: none;
  18.             width: 104px;
  19.             height: 104px;
  20.             display: flex;
  21.             justify-content: center;
  22.             align-items: center;
  23.             background: #0086FF;
  24.             border-radius: 50%;
  25.         }
  27.         li {
  28.             width: 0.08rem;
  29.             height: 0.2rem;
  30.             margin-left: 0.06rem;
  31.             border-radius: 0.04rem;
  32.             background: #fff;
  33.         }
  35.         li:first-child {
  36.             margin-left: 0;
  37.         }
  39.         .m1 {
  40.             animation: 0.8s 0.1s living linear infinite backwards normal;
  41.             animation-delay: -1.1s;
  42.         }
  44.         .m2 {
  45.             animation: 0.8s 0.3s living linear infinite backwards normal;
  46.             animation-delay: -1.3s;
  47.         }
  49.         .m3 {
  50.             animation: 0.8s 0.6s living linear infinite backwards normal;
  51.             animation-delay: -1.6s;
  52.         }
  54.         @keyframes living {
  55.             0% {
  56.                 transform: scaleY(0.5);
  57.                 transform-origin: 0 .21rem;
  58.             }
  60.             20% {
  61.                 transform: scaleY(1);
  62.                 transform-origin: 0 .21rem;
  63.             }
  65.             40% {
  66.                 transform: scaleY(1.5);
  67.                 transform-origin: 0 .21rem;
  69.             }
  71.             60% {
  72.                 transform: scaleY(2);
  73.                 transform-origin: 0 .21rem;
  75.             }
  77.             80% {
  78.                 transform: scaleY(1.5);
  79.                 transform-origin: 0 .21rem;
  81.             }
  83.             100% {
  84.                 transform: scaleY(1);
  85.                 transform-origin: 0 .21rem;
  87.             }
  88.         }
  89.     </style>
  90.     <script>
  91.         !function (global) {
  92.             var window = global || this,
  93.                 width = 720 / 2,
  94.                 docEl = window.document.documentElement,
  95.                 dpr = window.devicePixelRatio || 1,
  96.                 resizeEvt = 'resize',
  97.                 resizeCall = (function () {
  98.                     var clientWidth = docEl.clientWidth;
  99.                     if (!clientWidth) {
  100.                         docEl.style.fontSize = 100 + 'px';
  101.                     } else {
  102.                         clientWidth < 720 ? docEl.style.fontSize = 50 * (clientWidth / width) + 'px' : docEl.style.fontSize = '75px';
  103.                     }
  104.                     return arguments.callee;
  105.                 })();
  107.             dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1;
  108.             docEl.setAttribute('data-dpr', dpr);
  110.             window.addEventListener && window.addEventListener(resizeEvt, resizeCall, false);
  111.         }(this);
  112.     </script>
  113. </head>
  115. <body>
  116.     <ul class="miusicFa">
  117.         <li class="m1"></li>
  118.         <li class="m2"></li>
  119.         <li class="m3"></li>
  120.     </ul>
  121. </body>
  123. </html>