1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css做文字背景闪烁效果

css做文字背景闪烁效果

时间:2023-08-07 04:10:31

相关推荐

css做文字背景闪烁效果

项目当中最近有个需求就是。需要提醒进行某些操作的地方,要把那个操作做一个提醒的样式,比如高亮闪烁。

代码:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width:200px;padding: 50px;margin:0 auto;border:1px solid lightblue;}.operation-reminds{ //闪烁交替的样式-webkit-box-shadow: 0 0 20px 0 #fff0d5,0 0 0 2px #f1a325 !important; //阴影变大box-shadow: 0 0 20px 0 #fff0d5,0 0 0 2px #f1a325 !important; //阴影变大transition: box-shadow 1s!important; //阴影动态变大(小变大是个动画)color: #fff !important;background: #F6BE63;}.operation-reminds:hover{-webkit-box-shadow: 0 0 20px 0 #fff0d5,0 0 0 7px #f1a325 !important;box-shadow: 0 0 20px 0 #fff0d5,0 0 0 7px #f1a325 !important;transition: box-shadow 1s!important;}</style></head><body><div><a href="" id="bling">blingbling的~</a></div><script src="jquery-1.8.3.min.js"></script><script>$(function(){$("#bling").addClass("operation-remind-flag");setInterval(function(){if($('.operation-remind-flag').hasClass("operation-reminds")){$('.operation-remind-flag').removeClass("operation-reminds")}else{$('.operation-remind-flag').addClass("operation-reminds")}},900);})</script></body></html>

只要就是用到定时器,如果是有条件的闪烁,只要给需要加闪烁的标签:

1)加上一个operation-remind-flag类即可

2)调用一下事件(包含定时器的事件)

3)样式的问题:

operation-remind-flag类只是为了判断存在的,operation-reminds类才是和正常样式交替的样式;

如果不想要阴影变大的效果,可以去掉shadow的效果;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。