文字竖行显示并且逐字出现

html:

 1 <dl class="txt">
 2     <dt> 秋日下江南，有一种生活叫周庄</dt>
 3     <dd>
 4     <span>如</span>
 5     <span>果</span>
 6     <span>不</span>
 7     <span>是</span>
 8     <span>这</span>
 9     <span>古</span>
10     <span>朴</span>
11     <span>秀</span>
12     <span>雅</span>
13     <span>的</span>
14     <span>明</span>
15     <span>清</span>
16     <span>民</span>
17     <span>居；</span>
18     <br>
19     <span>这</span>
20     <span>一</span>
21     <span>片</span>
22     <span>流</span>
23     <span>水</span>
24     <span>也</span>
25     <span>算</span>
26     <span>平</span>
27     <span>常；</span>                               
54    </dd>
  </dl>

css:

 1 .txt .on{opacity: 1;}
 2 
 3 /* 文字竖着显示 */
 4 .txt{-webkit-writing-mode: vertical-rl;-ms-writing-mode: vertical-rl;writing-mode: vertical-rl;-webkit-writing-mode: tb-rl; -ms-writing-mode: tb-rl; writing-mode: tb-rl;}
 5 
 6 
 7 /* 调用动画 */
 8 .txt span{-webkit-animation: wenzi 1s backwards; -moz-animation: wenzi 1s backwards;-ms-animation: wenzi 1s backwards;
 9     -o-animation: wenzi 1s backwards; animation: wenzi 1s backwards;opacity: 0;}
10 /* 定义动画 */
11 @keyframes wenzi{
12  from {     
13      opacity: 0;
14  }
15  to {
16     opacity: 1;
17  }
18 }
19 
20 @-moz-keyframes wenzi{
21  from {
22     opacity: 0;
23  }
24  to {
25     opacity: 1;
26  }
27 }
28 
29 @-webkit-keyframes wenzi{
30  from {
31     opacity: 0;
32  }
33  to {
34     opacity: 1;
35  }
36 }
37 
38 @-ms-keyframes wenzi{
39  from {
40    opacity: 0;
41  }
42  to {
43    opacity: 1;
44  }
45 }
46 
47 @-o-keyframes wenzi1{
48  from {
49    opacity: 0;
50  }
51  to {
52    opacity: 1;
53  }
54 }

js:

$(function() {
    var delay = 1;
    $('.txt').find('span').each(function(index, el) {
        var oThis = $(this);
        oThis.addClass('on');
        oThis.css({
            'animation-delay': index * delay + 's'
        });
    });
})

 

posted @ 2016-09-28 18:44  Sunny_Lee  阅读(353)  评论(0)  编辑  收藏  举报