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

代码语言：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);
          --g-l: var(--c-l);
          flex-grow: 1;
          position: relative;
          overflow: hidden;
          border-radius: calc(var(--border-radius) - var(--pad));
          border-bottom-left-radius: 20vmin;
          border-bottom-right-radius: 20vmin;
        }
        .bg .section:before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent), radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - 45), 100%, 50%) 50%, transparent), radial-gradient(150% 100% at 50% 80%, transparent 35%, hsl(calc(var(--g-h) + 50), 100%, 99%));
          background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
          transform: scale3d(1.1, 1.25, 1);
          transform-origin: bottom;
          transition: transform 1s var(--ease-out) 0.5s;
        }
        .bg .section:after {
          content: "";
          position: absolute;
          inset: 0;
          border: var(--border-width) solid rgba(255, 255, 255, 0.8);
          border-radius: inherit;
          filter: blur(0.05vmin);
          -webkit-mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);
                  mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);
        }
        .bg .section .glow {
          position: absolute;
          inset: 0;
          border-radius: inherit;
          mix-blend-mode: overlay;
          z-index: 1;
          background: radial-gradient(80% 150% at 50% 100%, hsl(var(--g-h), 100%, var(--g-l)), transparent 70%);
        }
        .bg .section:last-of-type {
          --g-h: calc(var(--c-h) - var(--g-hue-adjust, 0));
          --g-s: calc(var(--c-s) - 25%);
          --g-l: calc(var(--c-l) + 20%);
          transform: scale3d(1, -1, 1) translateZ(1px);
        }
        .bg .section:last-of-type:before {
          background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent), radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust, 0))), 100%, 50%) 50%, transparent), radial-gradient(150% 100% at 50% 95%, transparent 15%, hsl(calc(var(--g-h) + 5), 100%, var(--g-lightness, 100%)));
          background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
        }
        
        .notch-container {
          position: absolute;
          z-index: 3;
          top: var(--pad);
          right: var(--pad);
          left: var(--pad);
          display: flex;
          justify-content: center;
          height: 100%;
          max-height: calc(var(--notch-radius) * 2);
          pointer-events: none;
          outline: none;
          transition: var(--notch-duration) var(--ease);
          transition-property: max-height, max-width, filter, transform;
          will-change: max-width, max-height, filter;
        }
        .notch-container:hover, .notch-container:focus-within {
          --shadow-opacity: 0.5;
          transition-timing-function: var(--ease-spring);
        }
        .notch-container:hover .notch, .notch-container:focus-within .notch {
          max-width: 100%;
          max-height: 100%;
          pointer-events: all;
          transform: scale3d(1, 1, 1);
        }
        .notch-container:hover ~ .notch-blur, .notch-container:focus-within ~ .notch-blur {
          opacity: 1;
          max-height: calc(var(--notch-radius) * 2.75 + var(--pad));
        }
        .notch-container:focus-within {
          max-height: calc(var(--notch-radius) * 3.333);
        }
        .notch-container:focus-within ~ .notch-blur {
          max-height: calc(var(--notch-radius) * 5);
          opacity: 1;
        }
        
        .notch-blur {
          position: absolute;
          z-index: 2;
          top: calc(var(--pad) - 3px);
          right: calc(var(--pad) - 3px);
          left: calc(var(--pad) - 3px);
          height: 100%;
          max-height: calc(var(--notch-radius) * 1.5);
          -webkit-backdrop-filter: blur(0.2vmin);
                  backdrop-filter: blur(0.2vmin);
          filter: blur(0.1vmin);
          -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--notch-radius)), transparent);
                  mask-image: linear-gradient(to bottom, black calc(100% - var(--notch-radius)), transparent);
          opacity: 0;
          transition: var(--notch-duration) ease-in-out;
          border-radius: calc(var(--border-radius) - var(--pad));
          transition: var(--notch-duration) var(--ease);
          transition-property: max-height, max-width, filter, transform;
          will-change: max-width, max-height, filter;
        }
        
        .notch {
          position: relative;
          background: black;
          border-radius: var(--notch-radius);
          pointer-events: all;
          display: flex;
          cursor: pointer;
          width: 100%;
          transition: inherit;
          transition-property: inherit;
          will-change: inherit;
          filter: drop-shadow(0 1vmin 2vmin hsla(0 0% 0%/var(--shadow-opacity, 0)));
          transform: scale3d(0.375, 0.4, 1);
          transform-origin: top;
        }
        
        .content {
          background: black;
        }
        
        .camera {
          display: flex;
          justify-content: center;
          align-items: center;
          height: var(--notch-height);
          aspect-ratio: 1/1;
          border-radius: 50%;
          pointer-events: none;
          position: absolute;
          z-index: 4;
          top: calc(var(--pad) * 2);
          right: calc(50% - calc(var(--notch-width) * 0.5));
          margin-right: calc(var(--pad) * 0.333);
        }
        .camera:before {
          content: "";
          height: 33.3%;
          aspect-ratio: 1;
          border-radius: inherit;
          box-shadow: inset 0 0 0.25vmin #4c4da3;
          background: radial-gradient(#6667ac, transparent 50%) no-repeat 33.3% 10%/75% 50%, radial-gradient(#454680, transparent 50%) no-repeat 60% 85%/50% 50%;
          background-color: #080928;
        }
        
        .screen {
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          flex-grow: 1;
          gap: var(--gutter);
          box-sizing: border-box;
          width: 100%;
          position: relative;
          overflow: hidden;
          z-index: 1;
          padding: var(--gutter);
          padding-top: calc(var(--gutter) * 3);
          border-radius: calc(var(--border-radius) - var(--pad));
        }
        
        .app {
          --col: 4;
          aspect-ratio: 1;
          border-radius: 20%;
          flex-basis: 15%;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 2%;
          padding: 5%;
          box-sizing: border-box;
          font-size: 1.5vmin;
          --scale: 1.5;
          --duration: 0.8s;
          transform: scale3d(var(--scale), var(--scale), 1);
          -webkit-animation: appear var(--duration) var(--ease-out) forwards;
                  animation: appear var(--duration) var(--ease-out) forwards;
        }
        .app:nth-child(1), .app:nth-child(2) {
          flex-basis: 40%;
          border-radius: 15%;
        }
        .app:not(:nth-child(1)):not(:nth-child(2)):before {
          content: "";
          background: white;
          border-radius: inherit;
          position: absolute;
          inset: 0;
   .........完整代码请登录后点击上方下载按钮下载查看