css随机闪烁的效果

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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值