网页动画的CSS亮点 [英] Web animation css highlight

问题描述

我看到这个网站上的文本高亮显示这位天才动画。有谁知道如何才达到这个文本高亮显示然后删除动画？

I saw this genius animation with text highlight on this website. Does anyone know how to achive this text highlight then delete animation?

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

推荐答案

使用window.setTimeout推出在特定的时间函数

Use window.setTimeout to launch functions at certain times

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

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

使用CSS：文本高亮和动画完成后，

use css :after for the text highlighting and animation.

.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/

这篇关于网页动画的CSS亮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！