前端杂谈 · Web

C3动画实现点击彩色呼吸灯效果

•̀.̫•́✧ · 12月17日 · 2019年本文1517字 · 阅读4分钟341

效果展示

请用鼠标狠狠点击下方的元素!!!

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js"></script>
		<style>
			@keyframes myFrame {
				0% {
					box-shadow: 0px 0px 50px darkred;
				}
				10% {
					box-shadow: 0px 0px 50px red;
				}
				20% {
					box-shadow: 0px 0px 50px orange;
				}
				30% {
					box-shadow: 0px 0px 50px yellow;
				}
				40% {
					box-shadow: 0px 0px 50px greenyellow;
				}
				50% {
					box-shadow: 0px 0px 50px cadetblue;
				}
				60% {
					box-shadow: 0px 0px 50px cornflowerblue;
				}
				70% {
					box-shadow: 0px 0px 50px mediumpurple;
				}
				80% {
					box-shadow: 0px 0px 50px palevioletred;
				}
				90% {
					box-shadow: 0px 0px 50px darkred;
				}
				100% {
					box-shadow: 0px 0px 50px darkred;
				}
			}
			
			.breathing {
				animation: myFrame 5s infinite;
			}
		</style>
		<title></title>
	</head>

	<body>
		<div id="show" style="width: 80px;height: 80px;border-radius:10px;background: sandybrown;margin: 20px;">
		</div>
		<script>
			$(document).ready(function() {
				$("#show").click(function() {
					console.log("breathing");
					$("#show").addClass("breathing");
				});
			});
		</script>
	</body>

</html>

测试以上代码

//这里贴要运行的代码
0 条回应