search

lcgyh / myDocs

0 stars 0 forks source link

文字竖行逐字显示出来 #37

Open lcgyh opened 6 years ago

lcgyh commented 5 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
    <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
    <style type='text/css'>
    .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;}
    .txt span{-webkit-animation: wenzi 1s backwards; -moz-animation: wenzi 1s backwards;-ms-animation: wenzi 1s backwards;-o-animation: wenzi 1s backwards; animation: wenzi 1s backwards;opacity: 0;}
    .txt .on{opacity: 1;}
    @keyframes wenzi{from {opacity: 0;} to {  opacity: 1;} }
    @-moz-keyframes wenzi{from {opacity: 0;} to {  opacity: 1;}}
    @-webkit-keyframes wenzi{from {opacity: 0;} to {  opacity: 1;}}
    @-ms-keyframes wenzi{from {opacity: 0;} to {  opacity: 1;}}
    @-o-keyframes wenzi{from {opacity: 0;} to {  opacity: 1;}}
    </style>
</head>
<body>
    <dl class="txt">
        <dt> 秋日下江南，有一种生活叫周庄</dt>
        <dd>
            <span>如</span><span>果</span><span>不</span><span>是</span><span>这</span><span>古</span><span>朴</span><span>秀</span><br>
            <span>这</span><span>明</span><span>清</span><span>民</span><span>这</span><span>雅</span><span>的</span> 
        </dd>
        </dl>
</body>
 <script>
    $(function() {
    var delay = 1;
    $('.txt').find('span').each(function(index, el) {
        var oThis = $(this);
        oThis.addClass('on');
        oThis.css({
            'animation-delay': index * delay + 's'
        });
    });
})
 </script>

</html>