网页动画css亮点

我在这个网站上看到了这个带有文字突出显示的天才动画。 有谁知道如何实现这个文本突出显示然后删除动画？

https://www.nobledesktop.com/certificates/web-design

Answer 1

使用window.setTimeout在特定时间启动函数

setTimeout(function(){ $('.text').addClass('highlight') }, 1000); setTimeout(function(){ $('.text').text(''); }, 2000); 

使用css：after用于文本突出显示和动画。

 .text{ font-size: 2em; font-family: sans-serif; position: relative; display: inline-block; } .text:after{ content: ""; background: #C8C8FF; height: 100%; width: 0%; position: absolute; z-index: -1; transition: all .5s ease 0s; right: 0; } .text.highlight:after{ width: 100%; } 

这一切都在一起：

http://jsfiddle.net/vzjc3xmr/