css随机闪烁的效果
效果：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="https://d3js.org/d3.v5.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container"></div>
</body>
<script type="text/javascript">
const COLUMNS = 19;
d3.select('.container')
.style('--columns',COLUMNS)
.selectAll("span")
.data(d3.range(COLUMNS * COLUMNS))
.enter()
.append("span")
.style('--delay',()=>Math.random()*4);
</script>
</html>
css代码
body{
margin: 0;
height: 100vh;
display:flex;
justify-content: center;
background-color: black;
align-items: center;
}
.container{
display: grid;
grid-template-columns: repeat(var(--columns),1fr);
}
.container span{
width: 25px;
height: 25px;
color: lime;
background-color: currentcolor;
animation: spin 5s linear infinite;
animation-delay: calc(var(--delay) * 1s);
transform: scale(0);
}
@keyframes spin{
0%{
transform: rotate(0deg) scale(1);
}
5%,15%{
transform: rotate(90deg) scale(0);
}
17.5%{
transform: rotate(180deg) scale(1);
background-color: currentcolor;
}
20%,100%{
transform: rotate(90deg) scale(0);
}
}
总结：
1）、这里使用到了 d3.js的一些语法：(7条消息) 可视化工具D3教程_Blog | Lelliam-CSDN博客_d3
2）、grid ：CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
3）、currentcolor：CSS currentColor 变量的使用 - 刘哇勇 - 博客园 (cnblogs.com)