css实现可控制的时光时空穿梭光影动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现可控制的时光时空穿梭光影动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.scene {
height: 100vh;
width: 100%;
overflow: hidden;
perspective: 10vmin;
}
div {
--unit: 1.5vmin;
width: var(--unit);
height: var(--unit);
--rotate: rotateY(90deg);
transform:
translateZ(-100vmin)
var(--rotate)
rotateX(var(--rx))
translateZ(var(--x))
scaleX(1);
position: absolute;
top: 0%;
left: 0%;
animation: none 900ms infinite ease-in;
background: white;
}
@keyframes hyper {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform:
translateZ(0vmin)
var(--rotate)
rotateX(var(--rx))
translateZ(var(--x))
scaleX(6);
}
}
body {
overflow: hidden;
background: black;
background-image:
radial-gradient(circle at 40% 40%, hsl(343,80%,7%) 0%, hsla(343,80%,10%,0) 40%),
radial-gradient(circle at 25% 52%, hsl(243,80%,9%) 0%, hsla(243,80%,10%,0) 50%),
radial-gradient(circle at 65% 56%, hsl(143,80%,8%) 0%, hsla(143,80%,10%,0) 60%);
background-blend-mode: screen
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: .5rem;
}
button {
margin: auto;
background: transparent;
border: .25rem solid currentColor;
border-radius: 1rem;
color: hsl(173, 100%, 50%);
font-size: 1.2em;
padding: .7rem 1.5rem
}
.hyper button {
color: hsl(343, 100%, 50%);
}
</style>
</head>
<body>
<main class="scene left">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div><.........完整代码请登录后点击上方下载按钮下载查看
网友评论0