js,css 像太阳一样的炫彩页面_js 色彩 hyper fade-CSDN博客

本文链接：https://blog.csdn.net/yueruitao/article/details/69389123

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.pulser {
width: 90vmin;
height: 90vmin;
border-radius: 50%;
mix-blend-mode: screen;
background: #d84578;
position: absolute;
transform-origin: 42vmin 48vmin;
animation: filtered 10000ms 0ms infinite alternate linear;
}
main {
width: 90vmin;
height: 90vmin;
position: relative;
}
body {
background: #042739;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
* {
box-sizing: border-box;
}

@keyframes filtered {
0% {
filter: hue-rotate(0deg) blur(3vmin);
}
100% {
filter: hue-rotate(360deg) blur(20vmin);
}
}

</style>

</head>
<body>
<script type="text/javascript">
var pulsers = Array.from(document.querySelectorAll('.pulser'));

pulsers.forEach(function(p, i) {
p.animate([
{transform: 'scale('+Math.random()+') translate3d(0,0,0) rotate(0deg)'},
{transform: 'scale('+Math.random()+') translate3d(0,0,0) rotate(360deg)'}
], {
duration: Math.random() * 5000 + 5000,
iterations: Infinity,
direction: 'alternate',
easing: 'cubic-bezier(.53,-0.38,.52,1.41)'
});

p.style.animationDelay = (-10000 * i / pulsers.length) + 'ms';
});

//switched to css keyframes
function filters(p) {
p.animate([
{filter: 'hue-rotate(0deg) blur(3vmin)'},// blur(0px)'},
{filter: 'hue-rotate(360deg) blur(20vmin)'}// blur('+(Math.random()*5)+'px)'}
], {
//iterationComposite: 'accumulate',
duration: 10000,
delay: -10000 * i / pulsers.length,
iterations: Infinity,
direction: 'alternate'
});
}

</script>
<main>
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
</main>
</body>
</html>