css实现可控制的时光时空穿梭光影动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现可控制的时光时空穿梭光影动画效果代码

代码标签: 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