css3、jquery实现边框闪烁小例

最新推荐文章于 2025-06-20 10:00:22 发布

原创最新推荐文章于 2025-06-20 10:00:22 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery为HTML元素添加动态边框颜色变化的方法。通过定义CSS动画并在JavaScript中触发这些动画来实现交互式的视觉效果。点击按钮后，一个简单的粉红色背景的div元素会呈现出渐进式的颜色变化。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<style>
div {
background: pink;
width: 50px;
height: 50px;
border: 2px solid transparent;
}
.change {
animation: myfirst 2s infinite;
-moz-animation: myfirst 2s infinite; /* Firefox */
-webkit-animation: myfirst 2s infinite; /* Safari and Chrome */
-o-animation: myfirst 2s infinite; /* Opera */
font-size: 24px;
}
@keyframes myfirst {
0% {
border-color:red;
}
25% {
border-color:yellow;
}
50% {
border-color:blue;
}
100% {
border-color:green;
}
}
@-moz-keyframes myfirst /* Firefox */ {
0% {
border-color:red;
}
25% {
border-color:yellow;
}
50% {
border-color:blue;
}
100% {
border-color:green;
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {
border-color:red;
}
25% {
border-color:orange;
}
50% {
border-color:#8B008B;
}
100% {
border-color:green;
}
}
@-o-keyframes myfirst /* Opera */ {
0% {
border-color:red;
}
25% {
border-color:yellow;
}
50% {
border-color:blue;
}
100% {
border-color:green;
}
}
</style>
</head>
<body>
<div></div>
<input type="button" id="button" style="width:50px;margin-top:5px;" value="请点击"/>
<script>
$(document).ready(function(e) {
$("#button").click(function(e) {
$("div").addClass("change");

});


});
</script>
</body>
</html>