一、前言
灵动岛（Dynamic Island ）是什么？
灵动岛，是苹果公司iPhone 14 Pro系列 [2]
交互UI，让虚拟软件和硬件的交互变得更为流畅。当有来电、短信等通知时，灵动岛会变化它的形态，以便让用户能够更直观地接收到这些信息。而在用户使用一些应用App并将其切换到后台时（如音乐），灵动岛也能以另一种形态来显示这些软件，还可以轻点这个区域进行更复杂一点的操作，比如切换歌曲。
功能
当用户收到信息后，iPhone 14 Pro显示屏上方的灵动岛可以展开显示信息。此外灵动岛还可以显示音乐播放、Siri等组件，让用户在首页直接完成各种功能控制和信息阅读。iPhone 14 Pro 拥有6.1英寸屏幕，还将推出6.7英寸的iPhone 14 Pro MAX [2]
发展历程
2022年9月，iOS 16.1 Beta 1 发布后，苹果iPhone 14 Pro和Max灵动岛已支持单手操作。 [4]
2022年10月，媒体报道，在一次新的采访中，苹果公司软件工程高级副总裁 Craig Federighi 和苹果公司人机界面设计副总裁 Alan Dye，讨论了 iPhone 14 Pro 的灵动岛。表示 iPhone X 问世五年来的第一个重大操作变化。
我主要实现的是从灵动岛跳转csdn主页的动画效果，大家有需要可以在html部分更改跳转的链接（iframe部分）
%iframe#doom{:height => "800", :src => "https://blog.csdn.net/weixin_43233219?spm=1019.2139.3001.5343/", :width => "1200"}
tips:但是该代码的缺点是目前该跳转链接和灵动岛的大小以及Ui不匹配
二、效果展示1
三、编码实现1
html部分
#wrapper
.phone
.inner
.info
%span#time
%span
.island
.framewrap
%iframe#doom{:height => "800", :src => "https://blog.csdn.net/weixin_43233219?spm=1019.2139.3001.5343/", :width => "1200"}
css部分
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
background: #000;
--transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.075);
perspective: 2400px;
&:after {
content: "Enter : Start // Arrow Keys : Move // Ctrl : Shoot // Space : Open Door";
color: #666;
position: absolute;
top: 10px;
font-size: 14px;
transition: var(--transition);
transform: translateY(-50px);
}
&:before {
content: "";
position: absolute;
width: 100vw;
height: calc(50vh - 100px);
bottom: 0;
left: 0;
z-index: 12;
pointer-events: none;
background: linear-gradient(to top, #000, rgba(0,0,0,0.01));
}
&.loaded {
.phone {
transform: translateY(0);
filter: brightness(1);
}
}
#wrapper {
position: absolute;
width: 100vw;
height: 100vh;
transition: transform 0.5s cubic-bezier(0.95, 0.84, 0.44, 1);
transform-style: preserve-3d;
transform: rotateX(30deg) translateZ(0px);
transform-origin: 50% 75%;
}
&:hover {
#wrapper {
transform: rotateX(30deg) translateZ(0px) scale(1.015);
}
}
&:not(.active){
.phone .island{
animation:pulse 10s ease-in-out infinite;
@keyframes pulse{
90%{
box-shadow:0 0 0 0px rgba(0,0,0,0.01);
}
95%{
box-shadow:0 0 0 3px rgba(0,0,0,0.25);
}
100%{
box-shadow:0 0 0 8px rgba(0,0,0,0.01);
}
}
}
}
&.active {
&:after {
transform: translateY(0);
transition-delay: 0.5s;
}
#wrapper {
transform: scale(1.25) translateZ(0px);
transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.075);
}
.phone {
.island {
&:after {
transform: scaleX(3.5) scaleY(9.85) translateZ(0px);
border-radius: 6px / 2px;
}
}
&:before {
filter: contrast(2);
}
.info {
width: 150%;
transition-delay: 0.05s;
}
}
.framewrap {
transform: translate(-50%, calc(-50% - 15px)) scale(1) translateZ(0px);
iframe {
opacity: 1;
}
}
}
.framewrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% - 15px)) scale(0) translateZ(0px);
transform-origin: 50% calc(50% - 100px);
width: 1000px;
height: 210px;
overflow: hidden;
transition: var(--transition);
z-index: 20;
&:before {
content: "";
position: absolute;
width: 330px;
height: 210px;
border-radius: 15px;
box-shadow: inset 0 0 0 5px #000, 0 0 0 5px #000;
z-index: 10;
pointer-events: none;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.phone {
position: absolute;
width: 400px;
height: 700px;
background: url("https://assets.codepen.io/383755/wallpaper.jpg") 50% 50% /
cover,
#000;
border-radius: 50px;
left: calc(50% - 200px);
top: calc(50% - 160px);
transform: scale(1.25) translateY(100vh) rotateX(-10deg);
transition: 2s cubic-bezier(0.175, 0.885, 0.32, 1.075);
filter: brightness(1.5);
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
left: 0;
top: 0;
box-shadow: inset 0 0 0 2px #666, inset 0 0 0 12.5px #000, 0 0 0 1px #fff;
z-index: 2;
transition: var(--transition);
}
&:after {
content: "";
position: absolute;
width: 2px;
height: 40px;
background: #efefef;
left: -3px;
top: 125px;
box-shadow: 0 75px 0 #efefef, 0 100px 0 #efefef;
}
.info {
position: absolute;
width: calc(100% - 100px);
top: 25px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: flex;
justify-content: space-between;
color: #fff;
transition: 0.175s cubic-bezier(0.175, 0.885, 0.32, 1.075);
transition-delay: 0.3s;
span:not(#time) {
&:before,
&:after {
content: "";
position: absolute;
top: 0;
}
&:before {
width: 25px;
height: 15px;
right: 20px;
background: linear-gradient(
to right,
#fff 3px,
rgba(0,0,0,0.01) 3px,
rgba(0,0,0,0.01) 10px
)
0px 100% / 20px 5px no-repeat,
linear-gradient(
to right,
#fff 3px,
rgba(0,0,0,0.01) 3px,
rgba(0,0,0,0.01) 10px
)
5px 100% / 20px 7.5px no-repeat,
linear-gradient(
to right,
#fff 3px,
rgba(0,0,0,0.01) 3px,
rgba(0,0,0,0.01) 10px
)
10px 100% / 20px 10px no-repeat,
linear-gradient(
to right,
#fff 3px,
rgba(0,0,0,0.01) 3px,
rgba(0,0,0,0.01) 10px
)
15px 100% / 20px 12.5px no-repeat;
}
&:after {
width: 22.5px;
height: 13px;
right: 0px;
background: radial-gradient(
circle at bottom,
#fff 2px,
rgba(0,0,0,0.01) 2px,
rgba(0,0,0,0.01) 5px,
#fff 5px,
#fff 7px,
rgba(0,0,0,0.01) 7px,
rgba(0,0,0,0.01) 10px,
#fff 10px,
#fff 12px,
rgba(0,0,0,0.01) 12px
);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
}
}
.island {
width: 100px;
height: 25px;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
z-index: 9;
border-radius: 50px;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
width: 12.5px;
height: 12.5px;
border-radius: 100%;
box-shadow: inset 0 0 2px 0.5px #333, 0 0 0 1px #111;
top: 5px;
right: 10px;
z-index: 2;
background: radial-gradient(circle at center, #222 1px, #000 1.5px) 1px
0px / 100% 100% no-repeat;
}
&:after {
width: 100%;
height: 100%;
border-radius: 50px;
background: #000;
top: 0;
left: 0;
transition: var(--transition);
transform-origin: top;
}
}
}
iframe {
clip-path: polygon(10px 207px, 650px 207px, 650px 612px, 10px 612px);
height: 800px;
width: 1200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(calc(-50% + 136.5px), calc(-50% - 5px)) scale(0.5);
opacity: 0;
transition: var(--transition);
}
}
js部分
document.querySelector(".island").addEventListener("click", function () {
document.body.classList.toggle("active");
});
document.addEventListener(
"DOMContentLoaded",
function () {
var today = new Date();
var time =
(today.getHours() % 12) +
":" +
today.getMinutes().toString().padStart(2, "0");
document.getElementById("time").appendChild(document.createTextNode(time));
setTimeout(() => {
document.body.classList.add("loaded");
}, 2000);
},
false
);
四、效果展示2
再增加一个前端灵动岛的ui效果源码，可以 切换界面的Ui主题颜色，有官方的几个配色和随机配色
效果图如下
五、源码2
.html代码
input(name="theme" type="radio" id="deep-purple" checked)
input(name="theme" type="radio" id="gold")
input(name="theme" type="radio" id="space-black")
input(name="theme" type="radio" id="silver")
input(name="theme" type="radio" id="random")
input(name="zoom" type="checkbox" id="zoom")
.scene
.pallette
label.swatch(tabIndex="0" for="deep-purple")
label.swatch(tabIndex="0" for="gold")
label.swatch(tabIndex="0" for="space-black")
label.swatch(tabIndex="0" for="silver")
label.swatch(tabIndex="0" for="random")
.icon
.tooltip CMD + click to save
.zoom-con
label.swatch(tabIndex="0" for="zoom")
.phone-con
.phone
.buttons
.left
.button
.button
.button
.right
.button
.camera
.screen-container
.bg
.deep-purple
.section
.glow
.section
.glow
.gold
.section
.glow
.section
.glow
.space-black
.section
.glow
.section
.glow
.silver
.section
.glow
.section
.glow
.random.canvas
.shapes
.shape
.shape
.shape
.shape
.shape
.shape
.notch-container(tabIndex="0")
.notch
.content
.left
.tile
.text
.right
.bar
.duration
.notch-blur
.screen
.app
.weather
.app
.app
.app
.app
.app
.app
.app
.app
.app
.css代码
@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%;
}
// Squircle effect
@function round-off() {
@return 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");
}
// Smoother gradients
@function scrim-gradient(
$startColor,
$direction: 'to bottom',
$from: 0,
$to: 100,
$type: linear,
$reverse: false,
$debug: false
) {
$scrimCoordinates: (
0: 1,
19: 0.738,
34: 0.541,
47: 0.382,
56.5: 0.278,
65: 0.194,
73: 0.126,
80.2: 0.075,
86.1: 0.042,
91: 0.021,
95.2: 0.008,
98.2: 0.002,
100: 0
);
$hsl: '';
@if type-of($startColor) == 'list' {
$hsl: $startColor;
} @else {
$hue: hue($startColor);
$saturation: saturation($startColor);
$lightness: lightness($startColor);
$hsl: #{$hue}, #{$saturation}, #{$lightness};
}
$stops: ();
@each $colorStop, $alpha in $scrimCoordinates {
$stop:
unquote("hsla(#{$hsl}, #{if($reverse, 1 - $alpha, $alpha)})")
$from + ($colorStop/($to/(100 - $from))) * 1%;
$stops: append($stops, $stop, comma);
}
@if $debug {
@return '$startColor: #{$startColor},$direction: #{$direction}, $from: #{$from}, $to: #{$to}, $type: #{$type}, $reverse: #{$reverse}';
}
@else {
@return #{$type}-gradient(unquote($direction), $stops);
}
}
@keyframes appear {
to {
transform: scale3d(1,1,1);
opacity: 1;
}
}
body {
background: darken(blue, 48);
}
.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);
animation: appear 1s var(--ease-out) forwards;
webkit-backface-visibility: hidden;
&: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;
.left,
.right {
position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}
.left {
right: 100%;
top: calc(var(--border-radius) * 2);
.button {
&:nth-child(1) {
height: 3em;
margin-bottom: 0.5em;
}
}
}
.right {
left: 100%;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
.button {
height: 9.5em;
}
}
.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(black, 0.5),
inset -0.1em -0.333em 0.1em rgba(black, 0.5),
;
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}
}
.screen-container {
position: absolute;
// overflow: hidden;
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);
// Bottom thingy
&: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(black, 0.1));
}
}
.bg {
position: absolute;
inset: 0;
background: black;
border-radius: calc(var(--border-radius) - var(--pad));
overflow: hidden;
// filter: round-off();
transform: translateZ(0);
> * {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 1s var(--ease-out) 0.5s;
background: black;
}
.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;
&:before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
scrim-gradient(black, '120% 110% at 50% 92.5%', $from: 33.3, $type: radial),
scrim-gradient((calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%), '100% 66.6% at 110% var(--g-hue-adjust-2-y, 100%)', $from: 33.3, $type: radial),
scrim-gradient((calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))), 100%, 50%), '100% 66.6% at -10% var(--g-hue-adjust-2-y, 100%)', $from: 33.3, $type: radial),
scrim-gradient((calc(var(--g-h) + 33.3), 100%, var(--g-lightness, 82.5%)), '150% 100% at 50% 80%', $from: 35, $type: radial, $reverse: true),
;
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;
}
&:after {
content: '';
position: absolute;
inset: 0;
border: var(--border-width) solid rgba(white, 0.8);
border-radius: inherit;
filter: blur(0.05em);
// backdrop-filter: blur(0.75em);
mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);
transform: translatez(2px);
}
.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%);
}
}
// Bottom bg section
.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;
// Stop transitions when resizing screen or zooming
.is-resizing &,
.is-resizing & * {
transition: none;
}
&:hover,
&:focus-within {
--shadow-opacity: 0.5;
transition-timing-function: var(--ease-spring);
.content {
--content-padding: 2em;
.text {
opacity: 1;
}
}
.notch {
max-width: 100%;
max-height: 100%;
// transition: max-width 0.3s ease-in-out, max-height 0.2s ease-in-out 0.1s;
pointer-events: all;
transform: scale3d(1,1,1);
}
~ .notch-blur {
opacity: 1;
max-height: calc(var(--notch-radius) * 3.333 + var(--pad));
}
}
&:focus-within {
max-height: calc(var(--notch-radius) * 3);
--bar-height: 1em;
--bar-opacity: 1;
.left,
.right {
max-height: calc(100% - var(--bar-height, 0%) - var(--content-gap));
}
~ .notch-blur {
max-height: calc(var(--notch-radius) * 5);
opacity: 1;
}
}
}
// Blurred drop-shadow
.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);
backdrop-filter: blur(0.2em);
mask-image: scrim-gradient(black, $from: 60);
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;
// max-height: var(--notch-height);
// max-width: var(--notch-width);
display: flex;
cursor: pointer;
width: 100%;
// max-width: var(--notch-width);
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;
&:before {
content: '';
position: absolute;
inset: 0;
background: black;
filter: round-off();
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;
.left,
.right {
height: 100%;
max-height: calc(100% - var(--bar-height, 0%));
display: flex;
align-items: center;
gap: 1em;
}
&, .left, .right, .bar, .text {
transition: var(--notch-duration) var(--ease-out);
}
.left, .right, .bar {
transition-property: max-height, opacity;
will-change: max-height;
}
.left {
flex-grow: 2;
// background: red;
}
.text {
display: flex;
flex-direction: column;
gap: 0.333em;
transition-property: opacity;
opacity: var(--bar-opacity, 0);
&:before {
content: 'The Move';
order: 1;
text-transform: uppercase;
}
&:after {
order: 2;
content: 'Space Rangers';
opacity: 0.5;
}
}
.right {
flex-grow: 1;
// background: blue;
}
.tile {
background: #{desaturate(darken(blue, 10), 25%)};
height: 100%;
aspect-ratio: 1;
border-radius: 33.3%;
position: relative;
&:before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(50% 50% at 55% 40%, desaturate(darken(blue, 20), 25%), #cd1385 75%, transparent) center / 133.3% 133.3%;
background-color: yellow;
filter: blur(0.05em);
}
}
.bar {
display: flex;
align-items: center;
gap: 1em;
flex-basis: 100%;
height: 100%;
max-height: var(--bar-height, 0%);
color: rgba(white, 0.5);
opacity: var(--bar-opacity, 0);
.duration {
position: relative;
height: var(--duration-height);
background: rgba(white, 0.25);
border-radius: calc(var(--duration-height) * 0.5);
overflow: hidden;
flex-grow: 1;
&:before {
content: '';
height: 100%;
background: white;
width: 25%;
position: absolute;
}
}
&:before {
content: '1:20';
}
&: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);
&: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(darken(#6667ac, 15), transparent 50%) no-repeat 60% 85% / 50% 50%,
;
background-color: #080928;
}
}
.screen {
// opacity: 0;
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);
animation: appear var(--duration) var(--ease-out) forwards;
&:nth-child(1),
&: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%;
}
&: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: round-off();
}
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(6),
&:nth-child(7),
&:nth-child(10) {
--scale: 1.75;
--duration: 1s;
}
&:nth-child(1) {
--app-bg-s1: #{darken(#6490d2, 10)};
--app-bg-s2: #6490d2;
color: white;
transform-origin: 125% 200%;
&:after {
content: 'Sunny';
}
.weather {
display: flex;
flex-direction: column;
gap: 2%;
&:before {
content: 'Oakland';
}
&:after {
font-size: 225%;
content: '80°';
}
}
}
&:nth-child(2) {
--app-bg-s1: #cbe2ae;
--app-bg-s2: #{lighten(#cbe2ae, 15)};
transform-origin: -25% 200%;
&:before {
content: '';
align-self: flex-end;
width: 40%;
background: #f8d7a2;
border: var(--border-width) solid white;
aspect-ratio: 1;
border-radius: 50%;
}
&:after {
content: 'Hudson Ave';
font-weight: 500;
margin-top: auto;
}
}
&:nth-child(3) {
--app-bg-s1: #a7f88f;
--app-bg-s2: #41c144;
transform-origin: 175% 200%;
}
&:nth-child(4) {
transform-origin: 75% 230%;
}
&:nth-child(5) {
--app-bg-s1: #cecdd5;
--app-bg-s2: #89888d;
transform-origin: -25% 230%;
}
&:nth-child(6) {
--app-bg-s1: #1ac5fb;
--app-bg-s2: #1d71f2;
transform-origin: -125% 200%;
}
&:nth-child(7) {
--app-bg-s1: #fe9b01;
--app-bg-s2: #f67324;
transform-origin: 175% 80%;
}
&:nth-child(8) {
--app-bg-s1: #cb65f0;
--app-bg-s2: #8628bb;
transform-origin: 75% 100%;
}
&:nth-child(9) {
--app-bg-s1: #1d71f2;
--app-bg-s2: #1ac8fd;
transform-origin: -25% 100%;
}
&: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: -.25em;
&:hover ~ .phone-con .screen {
transition-delay: 0.5s;
opacity: 0;
}
}
.zoom-con {
order: 1;
}
// --------------
// Theme picker
// --------------
// Hide inputs
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;
// transform: scale3d(0.85, 0.85, 1);
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);
animation: appear 0.333s var(--ease-out) forwards 0.75s;
display: flex;
align-items: center;
color: white;
justify-content: center;
outline: none;
&: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);
// filter: blur(0.2em);
// box-shadow: inset 0 0 0.1em 0.1em black;
}
&: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;
}
&:hover {
--border-opacity: 0.666;
}
&:focus {
--border-opacity: 1;
}
}
&:nth-child(1) {
transform-origin: 100% 200%;
}
&:nth-child(2) {
animation-delay: 0.8s;
transform-origin: 80% 200%;
}
&:nth-child(3) {
animation-delay: 0.85s;
transform-origin: 50% 200%;
}
&:nth-child(4) {
animation-delay: 0.9s;
transform-origin: 40% 200%;
}
&:nth-child(5) {
animation-delay: 0.95s;
transform-origin: 20% 200%;
}
&[for="deep-purple"] {
--swatch-s1: hsl(var(--deep-purple), 100%, 50%);
--swatch-s2: hsl(calc(var(--deep-purple) - 60), 100%, 20%);
&:before {
opacity: 0.5;
}
}
&[for="gold"] {
--swatch-s1: hsl(var(--gold), 100%, 50%);
--swatch-s2: hsl(var(--gold), 100%, 50%);
}
&[for="space-black"] {
--swatch-s1: hsl(var(--space-black), 50%, 20%);
--swatch-s2: hsl(var(--space-black), 50%, 10%);
&:before {
opacity: 0.5;
}
}
&[for="silver"] {
--swatch-s1: hsl(var(--silver), 50%, 80%);
--swatch-s2: hsl(var(--silver), 50%, 10%);
&:before {
opacity: 0.75;
}
}
&[for="random"] {
&:before {
background: none;
}
border-color: rgba(white, 0.25);
transition: border-color 0.2s var(--ease-out);
&:hover {
border-color: rgba(white, 0.75);
.icon {
opacity: 1;
}
}
.icon {
position: absolute;
inset: 22.5%;
background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18 15 3 3m0 0-3 3m3-3h-4l-1-1-1-1h-1m4-13 3 3m0 0-3 3m3-3h-4l-1 1-1 1-6 8-1 1-1 1H3M3 6h4l1 1 1 1 1 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.75;
transition: opacity 0.2s var(--ease-out);
}
#random:not(:checked) ~ .scene &:after {
border: none;
}
#random:checked ~ .scene & {
--swatch-s1: hsl(var(--r-h), var(--r-s), var(--r-l));
--swatch-s2: hsl(var(--r-h), var(--r-s), calc(min(98%, var(--r-l) + 10%)));
&:after {
border-color: hsl(var(--r-h), 50%, 75%);
}
.icon {
background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18 15 3 3m0 0-3 3m3-3h-4l-1-1-1-1h-1m4-13 3 3m0 0-3 3m3-3h-4l-1 1-1 1-6 8-1 1-1 1H3M3 6h4l1 1 1 1 1 1' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
&:hover,
&:focus {
.tooltip {
pointer-events: all;
opacity: 1;
}
}
}
}
&[for="zoom"] {
--zoom-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 27 9-9m-9 9v-9m0 9h9M27 5l-9 9m9-9v9m0-9h-9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
animation-delay: 1s;
transform-origin: 40% 200%;
border-color: rgba(white, 0.25);
transition: border-color 0.2s var(--ease-out);
&:before {
background: none;
}
&:after {
content: '';
position: absolute;
inset: 22.5%;
background: var(--zoom-icon) center / cover;
opacity: 0.75;
transition: opacity 0.2s var(--ease-out);
}
&:hover {
border-color: rgba(white, 0.5);
&:after {
opacity: 1;
}
}
&:focus {
border-color: rgba(white, 0.75);
&:after {
opacity: 1;
}
}
}
}
// Deep Purple theme
.deep-purple {
--c-h: var(--deep-purple);
--g-hue-adjust: 40;
--g-hue-adjust-2: 45;
.section:last-of-type {
--g-hue-adjust-2-y: 85%;
}
}
// Gold theme
.gold {
--c-h: var(--gold);
--g-hue-adjust: 0;
.section:last-of-type {
--g-hue-adjust: 15;
--g-hue-adjust-2: -190;
--g-lightness: 82.5%;
}
}
// Space Black theme
.space-black {
--c-h: var(--space-black);
--g-hue-adjust: 0;
--g-lightness: 95%;
.section:last-of-type {
--g-hue-adjust: 215;
--g-hue-adjust-2: -215;
}
}
// Silver theme
.silver {
--c-h: var(--silver);
--c-s: 10%;
--g-hue-adjust: 40;
--g-lightness: 95%;
--g-hue-adjust-2-y: 85%;
.section:last-of-type {
--g-hue-adjust-2: 15;
}
.glow {
opacity: 0.25;
}
}
$themes: 'deep-purple', 'gold', 'space-black', 'silver', 'random';
@each $theme in $themes {
label[for="#{$theme}"]:after {
border-color: hsl(var(--#{$theme}), 50%, 75%);
}
##{$theme}:checked {
~ .scene .phone .bg .#{$theme} {
opacity: 1;
z-index: 1;
transition-delay: 0s;
.section:before {
transition-delay: 0s;
transform: scale3d(1,1,1) translate3d(0, 0 ,0);
}
}
~ .scene .pallette label[for="#{$theme}"] {
--border-opacity: 1 !important;
}
}
}
// Zoom
#zoom:checked ~ .scene {
--size: max(5px, 2vmin);
opacity: 0;
animation: appear 0.5s var(--ease-out) forwards;
.phone {
order: 1;
}
.pallette,
.zoom-con {
order: 0;
font-size: 50%;
}
label[for="zoom"] {
--zoom-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14 18-9 9m9-9v9m0-9H5M18 14l9-9m-9 9V5m0 9h9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
}
#zoom:not(:checked) ~ .scene {
opacity: 0;
animation: appear-again 0.5s var(--ease-out) forwards;
@keyframes appear-again {
to {
transform: scale3d(1,1,1);
opacity: 1;
}
}
}
// Random gradient
.random {
background: hsl(var(--r-h), var(--r-s), var(--r-l));
&--colourful {
--bm-outer: overlay;
--bm-inner: difference;
}
&--moody {
--bm-outer: exclusion;
--bm-inner: multiply;
}
&--neon {
--bm-outer: hue;
--bm-inner: multiply;
}
&--abstract {
--bm-outer: color-burn;
--bm-inner: difference;
}
&--grayscale {
--bm-outer: color-burn;
--bm-inner: difference;
filter: brightness(1.2) grayscale(100%) contrast(2);
}
&--light-leak {
--bm-outer: color-burn;
--bm-inner: multiply;
}
}
.shapes {
mix-blend-mode: var(--bm-outer, overlay);
background: hsl(var(--r-h), var(--r-s), 85%);
position: absolute;
inset: 0%;
z-index: 1;
backface-visibility: hidden;
}
.shape {
position: absolute;
pointer-events: none;
transition-property: background, inset, border-radius, filter, transform;
will-change: inset, border-radius, filter;
mix-blend-mode: var(--bm-inner, difference);
top: 50%;
left: 50%;
aspect-ratio: 1/1;
background: hsl(var(--r-h), var(--r-s), var(--r-l));
width: var(--w, 99%);
border-radius: var(--b-r, 55%);
filter: blur(var(--b));
transform: translate3d(calc(var(--x, -1%) - 50%), calc(var(--y, -8%) - 50%), 0) scale3d(var(--s-x, 1.9), var(--s-y, 1.15), 1) rotate(var(--r, 260deg));
}
.tooltip {
--t-caret: 0.5em;
position: absolute;
z-index: 1;
top: calc(100% + var(--t-caret) + 0.5em);
white-space: nowrap;
background: black;
color: rgba(white, 0.75);
padding: 0.25em;
font-size: max(11px, 1em);
border-radius: 0.25em;
border: 1px solid lighten(black, 25);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s var(--ease);
&:after {
content: '';
position: absolute;
bottom: calc(100% - calc(var(--t-caret) / 2) - 1px);
left: calc(50% - calc(var(--t-caret) / 2));
border-radius: inherit;
height: var(--t-caret);
width: var(--t-caret);
background: inherit;
border: inherit;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(-135deg);
}
#zoom:checked ~ .scene & {
top: unset;
bottom: calc(100% + var(--t-caret) + 0.5em);
&:after {
transform: rotate(45deg);
top: calc(100% - calc(var(--t-caret) / 2) - 1px);
bottom: unset;
}
}
}
js部分
// Tiny bit of JS to ensure that the notch doesn't move about when you resize the screen
const delay = 300;
let afterResize;
let currentStyle;
window.onresize = function(){
document.body.classList.add('is-resizing');
clearTimeout(afterResize);
afterResize = setTimeout(() => document.body.classList.remove('is-resizing'), delay);
};
document.getElementById('zoom').addEventListener('click', () => {
document.body.classList.add('is-resizing');
setTimeout(() => document.body.classList.remove('is-resizing'), delay)
});
// Generating random gradient
let dimension = 1000; // Size of tile to be download px
const styles = ['colourful', 'moody', 'neon', 'abstract', 'grayscale', 'light-leak'];
const generateBtn = document.querySelector('[for="random"]');
const canvas = document.querySelector('.canvas');
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
// Generate randomised gradients
generateBtn.addEventListener('click', generateOrSave);
function generateOrSave(e) {
if (e.metaKey) {
saveGradient(e);
} else {
generateGradient();
}
}
function generateGradient() {
// Assign style
const newStyle = styles[Math.floor(Math.random() * styles.length)];
// console.log(styles, styles[Math.floor(Math.random() * styles.length)]);
if (currentStyle) canvas.classList.remove(`random--${currentStyle}`);
currentStyle = newStyle;
canvas.classList.add(`random--${newStyle}`);
// Loop through each canvas and assign a bunch of random CSS variables
const shapes = canvas.getElementsByClassName('shape');
document.body.style.setProperty('--r-h', `${random(0, 360)}deg`);
document.body.style.setProperty('--r-s', `${random(40, 90)}%`);
document.body.style.setProperty('--r-l', `${random(55, 90)}%`);
Object.values(shapes).forEach((shape) => {
shape.style.setProperty('--r-h', `${random(0, 360)}deg`);
shape.style.setProperty('--r-s', `${random(40, 90)}%`);
shape.style.setProperty('--r-l', `${random(55, 90)}%`);
shape.style.setProperty('--w', `${random(0, 30) + 85}%`);
shape.style.setProperty('--b-r', `${random(20, 60)}%`);
shape.style.setProperty('--b', `${random(5, 75) / 10}em`);
shape.style.setProperty('--x', `${random(0, 100) - 50}%`);
shape.style.setProperty('--y', `${random(0, 100) - 50}%`);
shape.style.setProperty('--s-x', `${1 + ((random(0, 130) - 30) / 100)}`);
shape.style.setProperty('--s-y', `${1 + ((random(0, 130) - 30) / 100)}`);
shape.style.setProperty('--r', `${random(0, 720) - 360}deg`);
})
}
// Convert RGB colour to Hex
// Needed for api.color.pizza call
const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
// Save gradient
function saveGradient(e) {
const gradient = canvas;
const rect = gradient.getBoundingClientRect();
const scale = dimension / rect.width
// Get canvas background color
const color = rgba2hex(window.getComputedStyle(gradient, null).getPropertyValue('background-color'));
console.log(color, scale, rect);
// Get name of color for use in file name
fetch(`https://api.color.pizza/v1/${color.substring(1)}`)
.then(c => c.json())
.then(c => {
// console.log(c);
// Convert DOM to canvas
domtoimage.toPng(gradient, {
bgColor: '#ffffff',
width: rect.width * scale,
height: rect.height * scale,
style: {
'transform': `scale(${scale})`,
'transform-origin': 'top left'
}
})
// Download image
.then(function (dataUrl) {
// const img = new Image();
// img.src = dataUrl;
// document.body.appendChild(img);
// Render canvas as a link and click dat
const link = document.createElement('a');
link.download = `${currentStyle}-${c['paletteTitle'].toLowerCase().replaceAll(' ','-')}-gradient`;
link.href = dataUrl;
link.click();
})
});
}
