解决方法
如果您只想使用CSS3,甚至不需要使用任何jQuery / Javascript。只需在您的CSS中执行此操作:
.confirm_selection { -webkit-transition: text-shadow 0.2s linear; -moz-transition: text-shadow 0.2s linear; -ms-transition: text-shadow 0.2s linear; -o-transition: text-shadow 0.2s linear; transition: text-shadow 0.2s linear; } .confirm_selection:hover { text-shadow: 0 0 10px red; /* replace with whatever color you want */ }
这是小提琴:http://jsfiddle.net/zenjJ/
编辑:
如果你想让元素自己运行(没有悬停),请执行以下操作:
CSS:
.confirm_selection { -webkit-transition: text-shadow 1s linear; -moz-transition: text-shadow 1s linear; -ms-transition: text-shadow 1s linear; -o-transition: text-shadow 1s linear; transition: text-shadow 1s linear; } .confirm_selection:hover,.confirm_selection.glow { text-shadow: 0 0 10px red; }
使用Javascript:
var glow = $('.confirm_selection'); setInterval(function(){ glow.toggleClass('glow'); },1000);
您可以在CSS / Javascript中使用时间来获得正确的效果。
最后,这是小提琴:http://jsfiddle.net/dH6LS/
更新2013年10月:所有主流浏览器现在都支持CSS动画,您需要的就是:
.confirm_selection { animation: glow .5s infinite alternate; } @keyframes glow { to { text-shadow: 0 0 10px red; } }
这是小提琴:http://jsfiddle.net/dH6LS/689/
不要忘记在生产中包含所有不同的供应商前缀。
原文地址:https://www.jb51.cc/css/218538.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。