react模仿iphone14灵动岛ui交互设计效果代码
代码语言:html
所属分类:布局界面
代码描述:react模仿iphone14灵动岛ui交互设计效果代码,包含消息提示、视频小窗播放、电池余量提醒、loading加载动画等。
代码标签: react 模仿 iphone14 灵动岛 ui 交互 设计
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import 'https://unpkg.com/open-props/open-props.min.css';
@import 'https://unpkg.com/open-props/normalize.min.css';
main {
display: grid;
place-items: center;
min-height: 100vh;
background: var(--gradient-11);
}
button {
padding: var(--size-2) var(--size-4);
border-radius: var(--radius-3);
}
.dynamic-island {
--height: 36px;
--font-size: calc(var(--height) * 0.35);
--camera-size: calc(3.6 * var(--height));
position: fixed;
top: var(--size-4);
left: 50%;
transform: translateX(-50%);
/*min-width: var(--size-10);*/
min-height: var(--height);
transition: all 0.2s ease;
display: inline-flex;
/*gap: var(--size-4);*/
justify-content: center;
align-items: center;
font-size: var(--font-size-1);
font-size: var(--font-size);
color: var(--gray-0);
/*background: grey;*/
/*opacity: 0.5;*/
display: grid;
align-items: center;
grid-template-columns: var(--auxiliary-width, 1fr) var(--camera-size) var(--auxiliary-width, 1fr);
grid-template-rows: var(--height) 1fr;
}
@media(min-width: 768px) {
.dynamic-island { --height: 50px; }
}
.dynamic-island:after {
content: "";
min-height: var(--height);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0) scaleX(var(--scale-x, 1));
border-radius: calc(var(--font-size) + var(--size-2));
min-width: var(--camera-size);
width: calc(var(--width-imposed, 40) * 1px);
height: calc(var(--height-imposed, 40) * 1px);
background: var(--gray-9);
transition: width 0.2s var(--ease-elastic-2), height 0.2s var(--ease-elastic-2);
z-index: -1;
/*opacity: 0.8;*/
}
.dynamic-island__media {
display: flex;
-webkit-animation: enter-media 0.2s 0.1s both;
animation: enter-media 0.2s 0.1s both;
white-space: nowrap;
}
.dynamic-island__stage--camera {
width: var(--camera-size);
display: flex;
justify-content: flex-end;
padding-right: var(--size-4);
}
.dynamic-island__lens {
height: calc(var(--height) * 0.5);
opacity: 0.5;
aspect-ratio: 1;
}
.dynamic-island__stage--center {
grid-column: 1 / -1;
display: grid;
place-items: center;
width: 100%;
max-width: 100%;
overflow: hidden;
}
#player {
max-width: 100%;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.dynamic-island__center {
padding: var(--size-4);
-webkit-animation: enter-info 0.2s 0.1s both;
animation: enter-info 0.2s 0.1s both;
width: 100%;
}
.dynamic-island__info {
padding-left: var(--size-4);
white-space: nowrap;
-webkit-animation: enter-info 0.2s 0.1s both;
animation: enter-info 0.2s 0.1s both;
}
.dynamic-island__media {
padding-right: var(--size-4);
display: flex;
justify-content: flex-end;
}
@-webkit-keyframes enter-info {
from {
opacity: 0;
}
}
@keyframes enter-info {
from {
opacity: 0;
}
}
@-webkit-keyframes enter-media {
from {
transform: scale(0);
}
}
@keyframes enter-media {
from {
transform: scale(0);
}
}
.template {
display: none;
position: fixed;
opacity: 0.2;
transform: translate(0, -19%);
}
.battery {
display: flex;
}
.globe {
display: inline-block;
position: relative;
}
.globes {
position: relative;
overflow: hidden;
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
.battery__icon--lightning {
display: inline-block;
-webkit-animation: lightning 1s infinite;
animation: lightning 1s infinite;
}
@-webkit-keyframes lightning {
0%, 10%, 20% {
transform: skew(15deg);
}
5%, 15%, 25% {
transform: skew(-15deg);
}
30%, 100% {
transform: skew(0deg);
}
}
@keyframes lightning {
0%, 10%, 20% {
transform: skew(15deg);
}
5%, 15%, 25% {
transform: skew(-15deg);
}
30%, 100% {
transform: skew(0deg);
}
}
.globes__placeholder {
color: transparent;
}
.loader {
height: calc(var(--height) * 0.6);
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
-webkit-animation: load 1s infinite steps(var(--count));
animation: load 1s infinite steps(var(--count));
}
@-webkit-keyframes load {
to {
transform: rotate(360deg);
}
}
@keyframes load {
to {
transform: rotate(360deg);
}
}
.loader > span {
width: 25%;
height: 10%;
background: white;
position: absolute;
transform: rotate(calc((360 / var(--count)) * var(--index) * 1deg)) translateX(150%);
opacity: calc(1 / var(--count) * var(--index));
}
.globes__translater {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
transform: translate(0, -50%);
white-space: nowrap;
-webkit-animation: globe-spin 0.5s infinite both steps(3);
animation: globe-spin 0.5s infinite both steps(3);
}
@-webkit-keyframes globe-spin {
to {
transform: translate(-100%, -50%);
}
}
@keyframes globe-spin {
to {
transform: translate(-100%, -50%);
}
}
</style>
</head>
<body >
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0