效果展示
请用鼠标狠狠点击下方的元素！！！
代码
<!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>
必须 注册 为本站用户， 登录 后才可以发表评论！