<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js+css3波纹催眠动画特效</title>
<style>
:root {
--r: 17;
--g: 206;
--b: 142;
--bg: #121212;
}
html {
background: var(--bg);
-webkit-transition: background 2s ease-in-out;
transition: background 2s ease-in-out;
}
.circle {
--scale: 1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
width: var(--size);
height: var(--size);
-webkit-animation: pulse 3s infinite ease-in-out;
animation: pulse 3s infinite ease-in-out;
-webkit-transition: background 2s ease-in-out;
transition: background 2s ease-in-out;
/* apparently having using var in rgb breaks sass... */
background: rgb(var(--r), var(--g), var(--b));
mix-blend-mode: luminosity;
}
/*
support for FF :sob:
FF doesn't support calc
in animation delay or opacity
so I can't use a for loop:
https://bugzilla.mozilla.org/show_bug.cgi?id=1318305
...I'm not proud of this
*/
.circle--1 {
opacity: 1;
-webkit-animation-delay: 0.12s;
animation-delay: 0.12s;
}
.circle--2 {
opacity: 0.5;
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
}
.circle--3 {
opacity: 0.3333;
-webkit-animation-delay: 0.36s;
animation-delay: 0.36s;
}
.circle--4 {
opacity: 0.25;
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
.circle--5 {
opacity: 0.2;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.circle--6 {
opacity: 0.1666;
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
.circle--1 {
--size: calc(50px * 1);
}
@media (min-width: 700px) {
.circle--1 {
--size: calc(7vw * 1);
}
}
@media (min-width: 1000px) {
.circle--1 {
--size: calc(70px * 1);
}
}
.circle--2 {
--size: calc(50px * 2);
}
@media (min-width: 700px) {
.circle--2 {
--size: calc(7vw * 2);
}
}
@media (min-width: 1000px) {
.circle--2 {
--size: calc(70px * 2);
}
}
.circle--3 {
--size: calc(50px * 3);
}
@media (min-width: 700px) {
.circle--3 {
--size: calc(7vw * 3);
}
}
@media (min-width: 1000px) {
.circle--3 {
--size: calc(70px * 3);
}
}
.circle--4 {
--size: calc(50px * 4);
}
@media (min-width: 700px) {
.circle--4 {
--size: calc(7vw * 4);
}
}
@media (min-width: 1000px) {
.circle--4 {
--size: calc(70px * 4);
}
}
.circle--5 {
--size: calc(50px * 5);
}
@media (min-width: 700px) {
.circle--5 {
--size: calc(7vw * 5);
}
}
@media (min-width: 1000px) {
.circle--5 {
--size: calc(70px * 5);
}
}
.circle--6 {
--size: calc(50px * 6);
}
@media (min-width: 700px) {
.circle--6 {
--size: calc(7vw * 6);
}
}
@media (min-width: 1000px) {
.circle--6 {
--size: calc(70px * 6);
}
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
25% {
-webkit-transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.3);
}
50% {
-webkit-transform: translate(-50%, -50%) scale(0.70);
transform: translate(-50%, -50%) scale(0.70);
}
75% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
25% {
-webkit-transform: translate(-50%, -50%) scale(1.3);
transform: translate(-50%, -50%) scale(1.3);
}
50% {
-webkit-transform: translate(-50%, -50%) scale(0.70);
transform: translate(-50%, -50%) scale(0.70);
}
75% {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
</style>
</head>
<body>
<div class='circle circle--1'></div>
<div class='circle circle--2'></div>
<div class='circle circle--3'></div>
<div class='circle circle--4'></div>
<div class='circle circle--5'></div>
<div class='circle circle--6'></div>
<script type="text/javascript">
function getRandomNumber() {
return Math.floor(Math.random() * 255);
}
function getBrightness(r, b, g) {
// brightness calculation from http://alienryderflex.com/hsp.html
return Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
);
}
setInterval(()=> {
const r = getRandomNumber(),
g = getRandomNumber(),
b = getRandomNumber(),
brightness = getBrightness(r,g,b);
document.documentElement.style.setProperty(`--r`, r);
document.documentElement.style.setProperty(`--g`, g);
document.documentElement.style.setProperty(`--b`, b);
let bgColor;
if (brightness > 40) {
bgColor = '#121212';
} else {
bgColor = '#BDBCBF';
}
document.documentElement.style.setProperty(`--bg`, bgColor);
}, 2000);
</script>
</body>
</html>
