报警（闪烁点）动画

html

<div class="circle">
<div class="wave"></div>
</div>

css

<style>
.circle {
position: relative;
}

.wave {
width: 5px;
height: 5px;
border-radius: 50%;
background: #ff0000 repeat;
position: absolute;
left: 50px;
top: 50px;
z-index: 99;
animation: warn 2s infinite;
-webkit-animation: warn 2s infinite;
/* Safari 与 Chrome */
}

@-webkit-keyframes warn {
0% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
50% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
}
100% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
}

@keyframes warn {
0% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
50% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
}
100% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
}
</style>

 

封装起来

<script>
function setStyle(divName,color,animateName){
animateName = animateName + " 2s ease infinite";
$(divName).css({
"background":color,
"animate":animateName,
"-webkit-animation": animateName,
})
}
setStyle('.wave','#ff0000','warn');
</script>

html

<div class="circle">
<div class="wave"></div>
</div>

css

<style>
.circle {
position: relative;
}
.wave {
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 50px;
top: 50px;
z-index: 99;
/* Safari 与 Chrome */
}

@-webkit-keyframes warn {
0% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
50% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
}
100% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
}

@keyframes warn {
0% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
50% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .3);
}
100% {
box-shadow: 0 0 10px 5px rgba(255, 0, 0, .8);
}
}
</style>

转载于:https://www.cnblogs.com/zhouyx/p/9353447.html