css3实现简单的文字动画效果

发布于2018/02/02 21:38:28 访问次数:4176 来源:本站

随着css3的主键强大,以前很多用javascript写的特效好多都能用css来写了,这里给js不好的同学带来的很多方便,
话不多说,直接来上一个demo.

html部分

<div className="animate box"> <span>不一样的WEB前端工程师</span></div>123

css部分

.animate { font-size: 40px; margin: 100px 0 0;}.animate span { display: inline-block;}.box span { color: #fff; opacity: 0; transform: translate(-150px, 0) scale(.5); animation: leftRight 1s forwards;}@keyframes leftRight { 40% { transform: translate(30px, 0) scale(.7); opacity: 1; color: #000; } 60% { color: #fff; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; }}1234567891011121314151617181920212223242526272829303132333435

自己复制在编辑器打开看看效果吧.