div+css实现iphone14灵动岛ui交互设计效果代码-html代码-BFW代码库

div+css实现iphone14灵动岛ui交互设计效果代码

代码语言：html

代码描述：div+css实现iphone14灵动岛ui交互设计效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @charset "UTF-8";
        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");
        :root {
          --height: 80vmin;
          --pad: 1.25vmin;
          --border-radius: 6.666vmin;
          --gutter: calc(var(--pad) * 2);
          --notch-height: 3.33vmin;
          --notch-width: 33.3%;
          --notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
          --notch-duration: 0.333s;
          --ease: cubic-bezier(.666, 0, .4, 1);
          --ease-spring: cubic-bezier(.666, 0, .4, 1.2);
          --ease-out: cubic-bezier(.15,0,.333,1);
          --border-width: 0.4vmin;
          --deep-purple: 284;
          --gold: 30;
          --space-black: 215;
          --silver: 254;
          --c-h: var(--deep-purple);
          --c-s: 100%;
          --c-l: 50%;
        }
        
        @-webkit-keyframes appear {
          to {
            transform: scale3d(1, 1, 1);
            opacity: 1;
          }
        }
        
        @keyframes appear {
          to {
            transform: scale3d(1, 1, 1);
            opacity: 1;
          }
        }
        body {
          background: #00000a;
          display: flex;
          flex-direction: column;
          gap: 3vmin;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          font-family: Inter;
        }
        
        .phone {
          position: relative;
          z-index: 1;
          aspect-ratio: 37/76;
          background: black;
          height: var(--height);
          border-radius: var(--border-radius);
          box-shadow: 0 0 0.1vmin 0.25vmin hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-width) hsl(var(--c-h), 30%, 85%);
          box-sizing: border-box;
          opacity: 0;
          transform: scale3d(1.1, 1.1, 1);
          -webkit-animation: appear 1s var(--ease-out) forwards;
                  animation: appear 1s var(--ease-out) forwards;
          webkit-backface-visibility: hidden;
        }
        .phone:before {
          content: "";
          position: absolute;
          top: var(--border-radius);
          right: calc(var(--border-width) * -1);
          bottom: var(--border-radius);
          left: calc(var(--border-width) * -1);
          border: 0.5vmin solid hsl(var(--c-h), 20%, 30%);
          border-left-width: 0;
          border-right-width: 0;
        }
        
        .screen-container {
          position: absolute;
          inset: 0;
          border-radius: var(--border-radius);
          border: var(--pad) solid black;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: calc(var(--pad) * 2);
        }
        .screen-container:before {
          content: "";
          position: absolute;
          z-index: 2;
          background: white;
          width: 36.6%;
          bottom: calc(var(--pad) * 0.75);
          height: calc(var(--pad) * 0.5);
          border-radius: calc(var(--pad) * 0.25);
          filter: drop-shadow(0 0.1vmin 0.25vmin rgba(0, 0, 0, 0.1));
        }
        
        .bg {
          position: absolute;
          inset: 0;
          background: black;
          border-radius: calc(var(--border-radius) - var(--pad));
          overflow: hidden;
        }
        .bg > * {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          opacity: 0;
          transition: opacity 1s var(--ease-out) 0.5s;
        }
        .bg .section {
          --g-h: var(--c-h);
          --g-s: var(--c-s).........完整代码请登录后点击上方下载按钮下载查看