首页 > web前端 > css教程 > CSS 实现打字效果

CSS 实现打字效果

高洛峰
发布: 2017-02-10 15:50:31
原创
2037 人浏览过

JS实现

最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞

CSS 实现打字效果

<p class="element"></p>

<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
登录后复制

具体用法可以看看项目地址,带注释的源码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-function

CSS3的动画都接触过,我们平时这么用

animation: animation-name animation-duration animation-iteration-count

animation: name 5s infinite;
登录后复制

其实完整版的animation参数很多,也可以写成分别的属性

  1. animation-name

  2. animation-duration

  3. animation-timing-function

  4. animation-delay

  5. animation-iteration-count

  6. animation-direction

今天我们就要关注一下animation-timing-function,大多数动画在时间轴上时线性变化的,jQuery动画的时候我们用的liner参数就是这意思,但CSS3提供了一些其它的变化方式由animation-timing-function属性指定

  1. ease

  2. linear

  3. ease-in

  4. ease-out

  5. ease-in-out

  6. step-start

  7. step-end

  8. steps

  9. cubic-bezier

每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果,这里不多说了

steps

我们看一下steps的效果,其实顾名思义就可以想到steps什么意思,就像俄罗斯方块的小格子往下掉也是动画,但是不是连续的,更像是逐帧的,steps就是实现这种效果的

steps的语法

steps(number_of_steps, [start|end])
登录后复制
  • number_of_steps 动画分为多少步执行

  • direction 动画显示状态,end:默认值,第一帧开始前显示,start:第一帧结束后显示

看个科学的图片帮助理解

CSS 实现打字效果

走两步

有了这些我们就能做个好玩儿的效果了

JS Bin


.walk {
  width: 125px;
  height: 150px;
  background: url(//m.sbmmt.com/) 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

更多CSS 实现打字效果相关文章请关注PHP中文网!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板