<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jquery-3.4.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>
网页效果:
这个访问量怎么这么高？看我的随机发光彩色小星星https://blog.csdn.net/weixin_43873198/article/details/103547090
