网页动画css亮点

Question

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

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/