CSS 实现打字效果 |
您所在的位置：网站首页 › css实现打字效果 › CSS 实现打字效果 |
CSS 实现打字效果
|
JS实现
最近做项目的时候需要实现一个字符逐个出现的打字效果，在网上一搜有个不错的jQuery插件Typed.js，效果很赞
具体用法可以看看项目地址，带注释的源码200多行，不算复杂 实现方法也不神奇，大多数人肯容易可以想到，用js逐个向容器内添加字符，作者做了很多字符的出来还有速度神马的，我们可以撸一个简单的 var s = 'Hello World! Hello World! Hello World!'; var con = $('.container'); var index = 0; var length = s.length; var tId = null; function start(){ con.text(''); tId=setInterval(function(){ con.append(s.charAt(index)); if(index++ === length){ clearInterval(tId); index = 0; start() } },100); } start();JS Bin CSS实现如果对细节和浏览器兼容性要求的不是很严格，我们可以通过CSS3实现 animation-timing-functionCSS3的动画都接触过，我们平时这么用 animation: animation-name animation-duration animation-iteration-count animation: name s infinite;其实完整版的animation参数很多，也可以写成分别的属性 animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction今天我们就要关注一下animation-timing-function，大多数动画在时间轴上时线性变化的，jQuery动画的时候我们用的liner参数就是这意思，但CSS3提供了一些其它的变化方式由animation-timing-function属性指定 ease linear ease-in ease-out ease-in-out step-start step-end steps cubic-bezier每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果，这里不多说了 steps我们看一下steps的效果，其实顾名思义就可以想到steps什么意思，就像俄罗斯方块的小格子往下掉也是动画，但是不是连续的，更像是逐帧的，steps就是实现这种效果的 steps的语法 steps(number_of_steps, [start|end]) number_of_steps 动画分为多少步执行 direction 动画显示状态，end：默认值，第一帧开始前显示，start：第一帧结束后显示看个科学的图片帮助理解
有了这些我们就能做个好玩儿的效果了 JS Bin .walk { width: 125px; height: 150px; background: url(http://lsly1989.qiniudn.com/xxxasddbgfbwalk.jpg) left; -webkit-animation:anima 1s steps(16) infinite ; } @-webkit-keyframes anima{ from { background-position:2000px 0;} to {background-position:0px 0;} } 打字效果打字效果也就可想而知了，改变容器宽度即可（只能单行使用，还得做到每步增加长度和字母宽度一致，还是js好其实） .typing{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: type 3s steps(50, end) infinite; animation: type 3s steps(50, end) infinite; } @-webkit-keyframes type{ from { width: 0;} } @keyframes type{ from { width: 0;} }JS Bin 参考MDN: timing-function Understanding CSS Timing Functions 本文转自魏琼东博客园博客，原文链接：http://www.cnblogs.com/dolphinX/p/4087817.html，如需转载请自行联系原作者 |
【本文地址】
今日新闻 |
推荐新闻 |