js+css实现带灵动岛的iphone-14切换效果代码
代码语言：html
所属分类：布局界面
代码描述：js+css实现带灵动岛的iphone-14切换效果代码
下面为部分代码预览，完整代码请点击下载或在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 {
--size: max(5px, 1vmin);
--height: 80em;
--pad: 1.25em;
--border-radius: 6.666em;
--gutter: calc(var(--pad) * 2);
--scene-pad: 5vmin;
--bg-blur: 0.333em;
--button-width: 0.333em;
--notch-height: 3.33em;
--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.4em;
--deep-purple: 284;
--gold: 22.5;
--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;
}
.scene {
display: flex;
flex-wrap: wrap;
gap: 3em 0;
align-items: center;
align-content: center;
justify-content: center;
min-height: 100vh;
font-family: Inter;
font-size: var(--size);
padding: var(--scene-pad);
box-sizing: border-box;
}
.phone-con {
flex-basis: 100%;
display: flex;
justify-content: center;
}
.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.1em 0.25em 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.5em solid hsl(var(--c-h), 20%, 30%);
border-left-width: 0;
border-right-width: 0;
}
.buttons {
position: absolute;
inset: calc(var(--border-width) * -1);
pointer-events: none;
}
.buttons .left,
.buttons .right {
position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}
.buttons .left {
right: 100%;
top: calc(var(--border-radius) * 2);
}
.buttons .left .button:nth-child(1) {
height: 3em;
margin-bottom: 0.5em;
}
.buttons .right {
left: 100%;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
}
.buttons .right .button {
height: 9.5em;
}
.buttons .button {
background: hsl(var(--c-h), 20%, 95%);
height: 6em;
box-shadow: inset -0.15em 0 0.1em black, inset 0 0 0.1em hsl(var(--c-h), 30%, 90%), inset 0 0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset 0 -0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5), inset -0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}
.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.1em 0.25em rgba(0, 0, 0, 0.1));
}
.bg {
position: absolute;
inset: 0;
background: black;
border-radius: calc(var(--border-radius) - var(--pad));
overflow: hidden;
transform: translateZ(0);
}
.bg > * {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 1s var(--ease-out) 0.5s;
background: black;
}
.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: 20em;
border-bottom-right-radius: 20em;
}
.bg .section:before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 110% at 50% 92.5%, hsla(0deg, 0%, 0%, 1) 33.3%, hsla(0deg, 0%, 0%, 0.738) 45.973%, hsla(0deg, 0%, 0%, 0.541) 55.978%, hsla(0deg, 0%, 0%, 0.382) 64.649%, hsla(0deg, 0%, 0%, 0.278) 70.9855%, hsla(0deg, 0%, 0%, 0.194) 76.655%, hsla(0deg, 0%, 0%, 0.126) 81.991%, hsla(0deg, 0%, 0%, 0.075) 86.7934%, hsla(0deg, 0%, 0%, 0.042) 90.7287%, hsla(0deg, 0%, 0%, 0.021) 93.997%, hsla(0deg, 0%, 0%, 0.008) 96.7984%, hsla(0deg, 0%, 0%, 0.002) 98.7994%, hsla(0deg, 0%, 0%, 0) 100%), radial-gradient(100% 66.6% at 110% var(--g-hue-adjust-2-y, 100%), hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 1) 33.3%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.738) 45.973%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.541) 55.978%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.382) 64.649%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.278) 70.9855%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.194) 76.655%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.126) 81.991%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.075) 86.7934%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.042) 90.7287%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.021) 93.997%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.008) 96.7984%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.002) 98.7994%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0) 100%), radial-gradient(100% 66.6% at -10% var(--g-hue-adjust-2-y, 100%), hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 1) 33.3%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.738) 45.973%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.541) 55.978%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.382) 64.649%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.278) 70.9855%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.194) 76.655%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.126) 81.991%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.075) 86.7934%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.042) 90.7287%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.021) 93.997%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.008) 96.7984%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0.002) 98.7994%, hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%, 0) 100%), radial-gradient(150% 100% at 50% 80%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0) 35%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.262) 47.35%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.459) 57.1%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.618) 65.55%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.722) 71.725%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.806) 77.25%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.874) 82.45%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.925) 87.13%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.958) 90.965%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.979) 94.15%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.992) 96.88%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 0.998) 98.83%, hsla(calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%), 1) 100%);
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.05em);
-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%);
transform: translatez(2px);
}
.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-l: calc(var(--c-l) + 40%);
--g-lightness: 95%;
transform: scale3d(1, -1, 1) translateZ(1px);
}
.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;
}
.is-resizing .notch-container, .is-resizing .notch-container * {
transition: none;
}
.notch-container:hover, .notch-container:focus-within {
--shadow-opacity: 0.5;
transition-timing-function: var(--ease-spring);
}
.notch-container:hover .content, .notch-container:focus-within .content {
--content-padding: 2em;
}
.notch-container:hover .content .text, .notch-container:focus-within .content .text {
opacity: 1;
}
.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) * 3.333 + var(--pad));
}
.notch-container:focus-within {
max-height: calc(var(--notch-radius) * 3);
--bar-height: 1em;
--bar-opacity: 1;
}
.notch-container:focus-within .left,
.notch-container:focus-within .right {
max-height: calc(100% - var(--bar-height, 0%) - var(--content-gap));
}
.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.2em);
backdrop-filter: blur(0.2em);
-webkit-mask-image: linear-gradient(to bottom, hsla(0deg, 0%, 0%, 1) 60%, hsla(0deg, 0%, 0%, 0.738) 67.6%, hsla(0deg, 0%, 0%, 0.541) 73.6%, hsla(0deg, 0%, 0%, 0.382) 78.8%, hsla(0deg, 0%, 0%, 0.278) 82.6%, hsla(0deg, 0%, 0%, 0.194) 86%, hsla(0deg, 0%, 0%, 0.126) 89.2%, hsla(0deg, 0%, 0%, 0.075) 92.08%, hsla(0deg, 0%, 0%, 0.042) 94.44%, hsla(0deg, 0%, 0%, 0.021) 96.4%, hsla(0deg, 0%, 0%, 0.008) 98.08%, hsla(0deg, 0%, 0%, 0.002) 99.28%, hsla(0deg, 0%, 0%, 0) 100%);
mask-image: linear-gradient(to bottom, hsla(0deg, 0%, 0%, 1) 60%, hsla(0deg, 0%, 0%, 0.738) 67.6%, hsla(0deg, 0%, 0%, 0.541) 73.6%, hsla(0deg, 0%, 0%, 0.382) 78.8%, hsla(0deg, 0%, 0%, 0.278) 82.6%, hsla(0deg, 0%, 0%, 0.194) 86%, hsla(0deg, 0%, 0%, 0.126) 89.2%, hsla(0deg, 0%, 0%, 0.075) 92.08%, hsla(0deg, 0%, 0%, 0.042) 94.44%, hsla(0deg, 0%, 0%, 0.021) 96.4%, hsla(0deg, 0%, 0%, 0.008) 98.08%, hsla(0deg, 0%, 0%, 0.002) 99.28%, hsla(0deg, 0%, 0%, 0) 100%);
opacity: 0;
border-radius: calc(var(--border-radius) - var(--pad));
transition: var(--notch-duration) var(--ease);
transition-property: max-height, max-width, opacity, transform;
will-change: max-width, max-height;
}
.notch {
position: relative;
border-radius: var(--notch-radius);
pointer-events: all;
overflow: hidden;
color: white;
display: flex;
cursor: pointer;
width: 100%;
transition: inherit;
transition-property: inherit;
will-change: inherit;
filter: drop-shadow(0 1em 2em hsla(0 0% 0%/var(--shadow-opacity, 0)));
transform: scale3d(0.375, 0.4, 1);
transform-origin: top;
}
.notch:before {
content: "";
position: absolute;
inset: 0;
background: black;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><defs><filter id='round'><feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' /><feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9' result='goo'/><feComposite in='SourceGraphic' in2='goo' operator='atop'/></filter></defs></svg>#round");
border-radius: inherit;
}
.content {
--content-padding: 1.75em;
--duration-height: 0.5em;
--content-gap: 1em;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: stretch;
padding: var(--content-padding);
gap: var(--content-gap);
font-size: 125%;
transition-property: padding;
will-change: padding;
position: relative;
}
.content .left,
.content .right {
height: 100%;
max-height: calc(100% - var(--bar-height, 0%));
display: flex;
align-items: center;
gap: 1em;
}
.content, .content .left, .content .right, .content .bar, .content .text {
transition: var(--notch-duration) var(--ease-out);
}
.content .left, .content .right, .content .bar {
transition-property: max-height, opacity;
will-change: max-height;
}
.content .left {
flex-grow: 2;
}
.content .text {
display: flex;
flex-direction: column;
gap: 0.333em;
transition-property: opacity;
opacity: var(--bar-opacity, 0);
}
.content .text:before {
content: "The Move";
order: 1;
text-transform: uppercase;
}
.content .text:after {
order: 2;
content: "Space Rangers";
opacity: 0.5;
}
.content .right {
flex-grow: 1;
}
.content .tile {
background: #1a1ab3;
height: 100%;
aspect-ratio: 1;
border-radius: 33.3%;
position: relative;
}
.content .tile:before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(50% 50% at 55% 40%, #131386, #cd1385 75%, transparent) center/133.3% 133.3%;
background-color: yellow;
filter: blur(0.05em);
}
.content .bar {
display: flex;
align-items: center;
gap: 1em;
flex-basis: 100%;
height: 100%;
max-height: var(--bar-height, 0%);
color: rgba(255, 255, 255, 0.5);
opacity: var(--bar-opacity, 0);
}
.content .bar .duration {
position: relative;
height: var(--duration-height);
background: rgba(255, 255, 255, 0.25);
border-radius: calc(var(--duration-height) * 0.5);
overflow: hidden;
flex-grow: 1;
}
.content .bar .duration:before {
content: "";
height: 100%;
background: white;
width: 25%;
position: absolute;
}
.content .bar:before {
content: "1:20";
}
.content .bar:after {
content: "-1:48";
}
.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.25em #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));
transition: opacity 1s var(--ease-out) 0.25s;
}
.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.5em;
--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%;
background: linear-gradient(190deg, var(--app-bg-s1, white) 33.3%, var(--app-bg-s2, var(--app-bg-s1, white))) top/100% 125%;
}
.app:not(:nth-child(1)):not(:nth-child(2)):before {
content: "";
background: linear-gradient(190deg, var(--app-bg-s1, white), var(--app-bg-s2, var(--app-bg-s1, white))) top/100% 125%;
border-radius: inherit;
position: absolute;
inset: 0;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><defs><filter id='round'><feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' /><feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9' result='goo'/><feComposite in='SourceGraphic' in2='goo' operator='atop'/></filter></defs></svg>#round");
}
.app:nth-child(1), .app:nth-child(2), .app:nth-child(3), .app:nth-child(6), .app:nth-child(7), .app:nth-child(10) {
--scale: 1.75;
--duration: 1s;
}
.app:nth-child(1) {
--app-bg-s1: #3c74c7;
--app-bg-s2: #6490d2;
color: white;
transform-origin: 125% 200%;
}
.app:nth-child(1):after {
content: "Sunny";
}
.app:nth-child(1) .weather {
display: flex;
flex-direction: column;
gap: 2%;
}
.app:nth-child(1) .weather:before {
content: "Oakland";
}
.app:nth-child(1) .weather:after {
font-size: 225%;
content: "80°";
}
.app:nth-child(2) {
--app-bg-s1: #cbe2ae;
--app-bg-s2: #eff6e6;
transform-origin: -25% 200%;
}
.app:nth-child(2):before {
content: "";
align-self: flex-end;
width: 40%;
background: #f8d7a2;
border: var(--border-width) solid white;
aspect-ratio: 1;
border-radius: 50%;
}
.app:nth-child(2):after {
content: "Hudson Ave";
font-weight: 500;
margin-top: auto;
}
.app:nth-child(3) {
--app-bg-s1: #a7f88f;
--app-bg-s2: #41c144;
transform-origin: 175% 200%;
}
.app:nth-child(4) {
transform-origin: 75% 230%;
}
.app:nth-child(5) {
--app-bg-s1: #cecdd5;
--app-bg-s2: #89888d;
transform-origin: -25% 230%;
}
.app:nth-child(6) {
--app-bg-s1: #1ac5fb;
--app-bg-s2: #1d71f2;
transform-origin: -125% 200%;
}
.app:nth-child(7) {
--app-bg-s1: #fe9b01;
--app-bg-s2: #f67324;
transform-origin: 175% 80%;
}
.app:nth-child(8) {
--app-bg-s1: #cb65f0;
--app-bg-s2: #8628bb;
transform-origin: 75% 100%;
}
.app:nth-child(9) {
--app-bg-s1: #1d71f2;
--app-bg-s2: #1ac8fd;
transform-origin: -25% 100%;
}
.app:nth-child(10) {
transform-origin: -125% 80%;
}
.pallette {
position: relative;
z-index: 1;
order: 1;
display: flex;
gap: 2em;
margin-right: 2.25em;
margin-bottom: -0.25em;
}
.pallette:hover ~ .phone-con .screen {
transition-delay: 0.5s;
opacity: 0;
}
.zoom-con {
order: 1;
}
input[type=radio],
input[type=checkbox] {
display: none;
}
.swatch {
--swatch-size: max(30px,5em);
--border-opacity: 0;
background: white;
width: var(--swatch-size);
height: var(--swatch-size);
border-radius: 50%;
position: relative;
cursor: pointer;
border: max(1.5px, var(--border-width)) solid black;
box-sizing: border-box;
background: radial-gradient(100% 100% at 50% 30%, var(--swatch-s1), var(--swatch-s2));
opacity: 0;
transform: translate3d(0, 20%, 0) scale3d(0.75, 0.75, 1);
-webkit-animation: appear 0.333s var(--ease-out) forwards 0.75s;
animation: appear 0.333s var(--ease-out) forwards 0.75s;
display: flex;
align-items: center;
color: white;
justify-content: center;
outline: none;
}
.swatch:before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: var(--border-width) solid black;
background-image: radial-gradient(400% 300% at 50% 225%, transparent 20%, white);
}
.swatch:not([for=zoom]):after {
content: "";
position: absolute;
inset: calc(var(--border-width) * -1);
border-width: inherit;
border-style: inherit;
opacity: var(--border-opacity);
transition: 0.25s var(--ease-out);
transition-property: opacity;
border-radius: inherit;
}
.swatch:not([for=zoom]):hover {
--border-opacity: 0.666;
}
.swatch:not([for=zoom]):focus {
--border-opacity: 1;
}
.swatch:nth-child(1) {
transform-origin: 100% 200%;
}
.swatch:nth-child(2) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
transform-origin: 80% 2.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0