css教程

CSS3实现苹果灵动岛效果

我的站长站 2023-01-14 人阅读

主要利用了CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>灵动岛</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #iphone14pro {
        position: relative;
        margin: auto;
        width: 974px;
        height: 876px;
        overflow: hidden;
        background-image: url([img]https://www.qcodes.cn/wp-content/uploads/2022/09/2022091405393859.png[/img]);
      }
      .demo {
        width: 320px;
        margin-top: 72px;
        margin: 72px auto 0;
        background-color: red;
        height: 80px;
        border-radius: 40px;
        background-color: #272729;
        position: relative;
      }
      .demo::after {
        position: absolute;
        content: " ";
        right: 0;
        width: 80px;
        height: 100%;
        border-radius: 80px;
        background-color: #272729;
      }
      /* 变长 */
      .longer {
        animation: longer 800ms ease-in-out forwards;
      }
      @keyframes longer {
        0% {
        }
        60% {
          width: 50vw;
        }
        80% {
          transform: scaleX(1.04);
        }
        100% {
          transform: scaleX(1);
          width: 50vw;
        }
      }
      /* 分离 */
      .divide {
        animation: divide-left 800ms ease-in-out forwards;
      }
      @keyframes divide-left {
        0% {
        }
        40% {
          transform: scaleX(1.1);
        }
 
        100% {
          transform: scaleX(1);
        }
      }
      .divide::after {
        animation: divide-right 800ms ease-in-out forwards;
      }
      @keyframes divide-right {
        0% {
        }
        40% {
          transform: scaleX(1.1);
        }
 
        100% {
          transform: scaleX(1);
          right: -100px;
        }
      }
      /* 融合 */
      .fusion {
        animation: fusion-left 800ms ease-in-out forwards;
      }
      @keyframes fusion-left {
        0% {
        }
        40% {
          transform: scaleX(1.1);
        }
 
        100% {
          transform: scaleX(1);
        }
      }
      .fusion::after {
        animation: fusion-right 800ms ease-in-out forwards;
      }
      @keyframes fusion-right {
        0% {
          right: -100px;
        }
        40% {
          transform: scaleX(1.1);
        }
 
        100% {
          transform: scaleX(1);
          right: 0;
        }
      }
      /* 变大 */
      .bigger {
        animation: bigger 800ms ease-in-out forwards;
      }
      @keyframes bigger {
        0% {
        }
        60% {
          width: 81vw;
          height: 400px;
          border-radius: 100px;
        }
        80% {
          transform: scaleX(1.04);
        }
        100% {
          width: 81vw;
          height: 400px;
          border-radius: 100px;
          transform: scaleX(1);
        }
      }
      .bigger::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="iphone14pro">
      <div></div>
    </div>
    <script>
      // 灵动岛对应dom
      const box = document.querySelector(".demo");
 
      const animationList = ["longer", "divide", "fusion", "bigger"];
      box.addEventListener("click", () => {
        box.classList.add(animationList[index]);
      });
      let index = 0;
      // 每一个动画结束都会触发此事件(包括子元素及不同种类属性动画)
      box.addEventListener("animationend", (e) => {
        if (
          e.animationName === "divide-right" ||
          e.animationName === "fusion-right"
        ) {
          return;
        }
        index++;
        setTimeout(() => {
          if (index <= animationList.length - 1) {
            box.classList.add(animationList[index]);
          } else {
            index = 0;
          }
        }, 800);
      });
    </script>
  </body>
</html>


相关推荐
  • CSS3教程
  • CSS3实现苹果灵动岛效果

    主要利用了CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>灵动岛</title>...

    css教程 56 1年前
  • CSS3背景图片固定滑动效果

    CSS3背景图片固定住,滚动条滚动浮动在固定位置,这种效果网上看到很多。有一种视觉差的酷炫效果,一般大气的企业网站会非常常见,这种CSS效果运用的好会让网站非常大气上档次。今天我的站长站分享给大家,其实非常简单。background-attachment: fixed;CSS3的...

    css教程 95 4年前
  • CSS3做一个手机端左右滑动菜单

    手机端因为布局很窄,如果刚好菜单很多的情况下,我们就可以把菜单左侧左右滑动的效果,来节省空间,大致效果如下图具体效果可以参考今日头条,菜单可以左右滑动。有些花里胡哨的代码会用上JS,其实这种只需要CSS就能搞定,下面看代码。HTML代码<div><a href="htt...

    css教程 126 4年前
最新更新