css实现立体重叠卡片炫酷变色动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现立体重叠卡片炫酷变色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@property --a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
@property --l {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --x {
syntax: "<length>";
inherits: false;
initial-value: 0;
}
@property --y {
syntax: "<length>";
inherits: false;
initial-value: 0;
}
@property --o {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
body {
color: white;
position: relative;
transform: scale(1.2);
overflow: hidden;
}
body:before {
content: "";
display: grid;
place-items: center;
opacity: 0.9;
font-size: 2rem;
z-index: -1;
background: conic-gradient(from 180deg, #111, black, #222, black, #111);
inset: 0;
position: absolute;
pointer-events: none;
}
body:after {
pointer-events: none;
content: "";
background: url(https://assets.codepen.io/907471/noise.svg) center center;
inset: 0;
filter: brightness(1.2) saturate(3);
opacity: 0.1;
mix-blend-mode: overlay;
position: absolute;
}
.ai {
--items: 6;
rotate: 0deg;
position: absolute;
--s: 40vmin;
--p: calc(var(--s) / 4);
width: var(--s);
aspect-ratio: 1;
padding: var(--p);
display: grid;
place-items: center;
border-radius: 50%;
transform: scale(1.4);
}
.ai:nth-child(1):not(:last-of-type) {
--i: 0;
--scale-per-item: calc(0.55 / (var(--items) - 1));
scale: calc(1.2 - var(--scale-per-item) * var(--i));
--rotation-per-item: calc(45deg / (var(--items) - 1));
rotate: calc(var(--rotation-per-item) * var(--i));
}
.ai:nth-child(2):not(:last-of-type) {
--i: 1;
--scale-per-item: calc(0.55 / (var(--items) - 1));
scale: calc(1.2 - var(--scale-per-item) * var(--i));
--rotation-per-item: calc(45deg / (var(--items) - 1));
rotate: calc(var(--rotation-per-item) * var(--i));.........完整代码请登录后点击上方下载按钮下载查看
网友评论0