html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果

如上图，这种效果看着是不是挺“柔”的

附代码

文字一次渐变出现

body{

background-color: #333333;

padding: 20px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

div,span{

color: #ffffff;

font-size: 30px;

}

.hidden{

display: none;

animation: all 1s 1;

}

.display{

display: inline-block;

animation: text 3s 1;

}

@keyframes text {

0%{

color: transparent;

}

100%{

color: #fff;

}

var str='我们这一路被带去；抑或为了生？抑或为了死？不，没有死，只有生;我见过生与死：我们无须怀疑，我们有充分的证据；它们迥然不同，令人恐惧;如同死亡，新的诞生也带给我们痛苦;我们回到自己的地方，回到灵魂的国土；遵循过去的天道，让我们不再安逸和幸福;外邦人紧握他们的神，祈求永生；而我乐于再死一次———义无反顾'

//分割为数组

var arr=str.split('')

$.each(arr,function (index,el) {

//依次将每个字放到div里

$('div').append(''+el+'')

//给每个字添加样式，时机为 index*150 ms

setTimeout(function () {

$('#text'+index).addClass('display')

},index*150)

})

这里主要分两步

第一步

利用setTimeout的延时效果依次将文字显示出来，每个文字显示的时机都是 index*150 ms，其实这时主要效果已经出来了，类似那种打字的效果

第二步

利用animation与keyframe实现每个字的渐变效果，颜色从透明过渡到#fff，这样每个字连起来，就实现了如上图的效果

demo体验地址

html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果相关推荐

css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角在 CSS2 中添加圆角棘手.我们不得不在 ...
简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
css3动画制作转动相册
一.CSS3 动画 CSS3 可以创建动画,它可以取代许多网页动画图像.Flash 动画和 JavaScript 实现的效果. 1.CSS3 @keyframes 规则要创建 CSS3 动画,你需要 ...

html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果

html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果相关推荐

最新文章

热门文章