css实现水晶玻璃晶莹剔透立方体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现水晶玻璃晶莹剔透立方体旋转动画效果代码
代码标签: css 水晶 玻璃 晶莹 剔透 立方体 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
background-color: #000;
height: 100vh;
display: grid;
font-size: .5vmin;
filter: saturate(0) contrast(2);
}
svg {
display: none;
}
body *,
body *::before,
body *::after {
position: absolute;
transform-style: preserve-3d;
}
.scene {
width: 100em;
aspect-ratio: 1;
place-self: center;
perspective: 250em;
}
.cube, .wall {
inset: 0;
}
.cube {
animation: spin 6s linear infinite;
}
@keyframes spin {
0% {
rotate: y 75deg;
}
100% {
rotate: y 435deg;
}
}
.wall:nth-child(1) {
--step: 0;
}
.wall:nth-child(2) {
--step: 1;
}
.wall:nth-child(3) {
--step: 2;
}
.wall:nth-child(4) {
--step: 3;
}
.wall:nth-child(5) {
--step: 4;
--dir: 1;
}
.wall:nth-child(6) {
--step: 5;
--dir: -1;
}
.side {
transform: rotateY(calc(var(--step)*90deg)) translateZ(50em);
border-bottom: 1px solid #fff4;
animation: sheen 6s linear infinite;
animation-delay: calc(-5.9s - 1.5s*var(--step));
}
@keyframes sheen {
0%, 90% {
background-color: #fff0;
}
100% {
background-color: #fff5;
}
}
.side::before {
content: '';
inset: 0;
backface-visibility: hidden;
background-image: linear-gradient(45deg, #999, #444);
rotate: y 180deg;
animation: darken 1.5s ease-in-out alternate infinite.........完整代码请登录后点击上方下载按钮下载查看
网友评论0