<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Dia 19</title>
</head>
<body>
<div class="brilho">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="brilho">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="brilho">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="brilho">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="brilho">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
*
{
margin: 0;
padding: 0;
}
body
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.brilho
{
position: relative;
min-width: 750px;
height: 750;
margin: -150px;
transform-origin: right;
animation: corMudando 5s linear infinite;
}
@keyframes corMudando
{
0%
{
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
}
.brilho:nth-child(even)
{
transform-origin: left;
}
.brilho span
{
position: absolute;
top: calc(80px * var(--i));
left: calc(80px * var(--i));
bottom: calc(80px * var(--i));
right: calc(80px * var(--i));
}
.brilho span:before
{
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 15px;
height: 15px;
background: #f00;
border-radius: 50%;
}
.brilho span:nth-child(3n + 1):before
{
background: rgba(134,255,0,1);
box-shadow: 0 0 20px rgba(134,255,0,1),
0 0 40px rgba(134,255,0,1),
0 0 60px rgba(134,255,0,1),
0 0 80px rgba(134,255,0,1),
0 0 0 8px rgba(134,255,0,.1);
}
.brilho span:nth-child(3n + 2):before
{
background: rgba(255,214,0,1);
box-shadow: 0 0 20px rgba(255,214,0,1),
0 0 40px rgba(255,214,0,1),
0 0 60px rgba(255,214,0,1),
0 0 80px rgba(255,214,0,1),
0 0 0 8px rgba(255,214,0,.1);
}
.brilho span:nth-child(3n + 3):before
{
background: rgba(0,226,255,1);
box-shadow: 0 0 20px rgba(0,226,255,1),
0 0 40px rgba(0,226,255,1),
0 0 60px rgba(0,226,255,1),
0 0 80px rgba(0,226,255,1),
0 0 0 8px rgba(0,226,255,.1);
}
.brilho span:nth-child(3n+1)
{
animation: animate 10s alternate infinite;
}
.brilho span:nth-child(3n+2)
{
animation: animate-reverse 3s alternate infinite;
}
.brilho span:nth-child(3n+3)
{
animation: animate 8s alternate infinite;
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
@keyframes animate-reverse
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
JS
格式化