颜色深度渐变特效
代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>追光者♂</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="canvas"></button>
<button class="erase"></button>
<div class="g">
<script>
var nr = getComputedStyle(document.documentElement).getPropertyValue('--nr');
document.write('<b></b>'.repeat(nr * nr));
</script>
</div>
</body>
</html>
style.css
:root {
--nr: 20;
background-color: #000;
-moz-user-select: none;
user-select: none;
}
.g {
display: grid;
grid-template-columns: repeat(var(--nr), 1fr);
}
b {
outline: 1px solid #333;
height: calc(100vw / var(--nr));
animation: 800ms fade infinite alternate steps(8) paused;
}
body:active b:hover {
animation-play-state: running;
}
@keyframes fade {
from {
background-color: black;}
to {
background-color: white;}
}
.erase:active ~ .g b {
animation: none;
}
.canvas:active ~ .g b {
animation-play-state: running;
}
b:hover {
outline-color: #999;
z-index: 1;
}
button[class]:empty::before {
content: attr(class);
}
以上即为全部源代码，在这里分享给大家，也可以直接点击我的主页里面的“资源”去下载哦！我已经上传啦！