请选择 进入手机版 | 继续访问电脑版

HTML5CSS3+JS实现灵动岛效果

[复制链接]
查看857 | 回复0 | 2022-9-19 21:09 | 显示全部楼层 |阅读模式
主要利用CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考

HTML5CSS3+JS实现灵动岛效果

HTML5CSS3+JS实现灵动岛效果

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <title>灵动岛</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       #iphone14pro {
  13.         position: relative;
  14.         margin: auto;
  15.         width: 974px;
  16.         height: 876px;
  17.         overflow: hidden;
  18.         background-image: url([img]https://www.qcodes.cn/wp-content/uploads/2022/09/2022091405393859.png[/img]);
  19.       }
  20.       .demo {
  21.         width: 320px;
  22.         margin-top: 72px;
  23.         margin: 72px auto 0;
  24.         background-color: red;
  25.         height: 80px;
  26.         border-radius: 40px;
  27.         background-color: #272729;
  28.         position: relative;
  29.       }
  30.       .demo::after {
  31.         position: absolute;
  32.         content: " ";
  33.         right: 0;
  34.         width: 80px;
  35.         height: 100%;
  36.         border-radius: 80px;
  37.         background-color: #272729;
  38.       }
  39.       /* 变长 */
  40.       .longer {
  41.         animation: longer 800ms ease-in-out forwards;
  42.       }
  43.       @keyframes longer {
  44.         0% {
  45.         }
  46.         60% {
  47.           width: 50vw;
  48.         }
  49.         80% {
  50.           transform: scaleX(1.04);
  51.         }
  52.         100% {
  53.           transform: scaleX(1);
  54.           width: 50vw;
  55.         }
  56.       }
  57.       /* 分离 */
  58.       .divide {
  59.         animation: divide-left 800ms ease-in-out forwards;
  60.       }
  61.       @keyframes divide-left {
  62.         0% {
  63.         }
  64.         40% {
  65.           transform: scaleX(1.1);
  66.         }

  67.         100% {
  68.           transform: scaleX(1);
  69.         }
  70.       }
  71.       .divide::after {
  72.         animation: divide-right 800ms ease-in-out forwards;
  73.       }
  74.       @keyframes divide-right {
  75.         0% {
  76.         }
  77.         40% {
  78.           transform: scaleX(1.1);
  79.         }

  80.         100% {
  81.           transform: scaleX(1);
  82.           right: -100px;
  83.         }
  84.       }
  85.       /* 融合 */
  86.       .fusion {
  87.         animation: fusion-left 800ms ease-in-out forwards;
  88.       }
  89.       @keyframes fusion-left {
  90.         0% {
  91.         }
  92.         40% {
  93.           transform: scaleX(1.1);
  94.         }

  95.         100% {
  96.           transform: scaleX(1);
  97.         }
  98.       }
  99.       .fusion::after {
  100.         animation: fusion-right 800ms ease-in-out forwards;
  101.       }
  102.       @keyframes fusion-right {
  103.         0% {
  104.           right: -100px;
  105.         }
  106.         40% {
  107.           transform: scaleX(1.1);
  108.         }

  109.         100% {
  110.           transform: scaleX(1);
  111.           right: 0;
  112.         }
  113.       }
  114.       /* 变大 */
  115.       .bigger {
  116.         animation: bigger 800ms ease-in-out forwards;
  117.       }
  118.       @keyframes bigger {
  119.         0% {
  120.         }
  121.         60% {
  122.           width: 81vw;
  123.           height: 400px;
  124.           border-radius: 100px;
  125.         }
  126.         80% {
  127.           transform: scaleX(1.04);
  128.         }
  129.         100% {
  130.           width: 81vw;
  131.           height: 400px;
  132.           border-radius: 100px;
  133.           transform: scaleX(1);
  134.         }
  135.       }
  136.       .bigger::after {
  137.         display: none;
  138.       }
  139.     </style>
  140.   </head>
  141.   <body>
  142.     <div id="iphone14pro">
  143.       <div class="demo"></div>
  144.     </div>
  145.     <script>
  146.       // 灵动岛对应dom
  147.       const box = document.querySelector(".demo");

  148.       const animationList = ["longer", "divide", "fusion", "bigger"];
  149.       box.addEventListener("click", () => {
  150.         box.classList.add(animationList[index]);
  151.       });
  152.       let index = 0;
  153.       // 每一个动画结束都会触发此事件(包括子元素及不同种类属性动画)
  154.       box.addEventListener("animationend", (e) => {
  155.         if (
  156.           e.animationName === "divide-right" ||
  157.           e.animationName === "fusion-right"
  158.         ) {
  159.           return;
  160.         }
  161.         index++;
  162.         setTimeout(() => {
  163.           if (index <= animationList.length - 1) {
  164.             box.classList.add(animationList[index]);
  165.           } else {
  166.             index = 0;
  167.           }
  168.         }, 800);
  169.       });
  170.     </script>
  171.   </body>
  172. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24