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-ti CSS3的動畫都接觸過，我們平常也這麼用

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

animation: name 5s infinite;

登入後複製

其實完整版的animation參數很多，也可以寫成分別的屬性

animation-du-du-duion function
animation-delay
animation-iteration-count
animation-direction
的，jQuery動畫的時候我們用的liner參數就是這意思，但CSS3提供了一些其它的變化方式由animation-timing-function屬性指定

ease

ease-out
ease-in-out
step-start
steps
steps的語法
```
steps(number_of_steps, [start|end])
```
登入後複製
number_of_steps 動畫分為多少步執行
direction 動畫顯示狀態，end：預設值，第一幀開始前顯示，start：第一幀結束後顯示
看科學的圖片幫助理解

看個科學的圖片幫助理解

了這些我們就能做個好玩兒的效果了

JS Bin

.walk {
  width: 125px;
  height: 150px;
  background: url(http://www.php.cn/) 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;}
}

登入後複製

更多CSS 實現打字效果相關文章請關注PHP中文網！