[家长里短] 文字效果2 教程

越拖越不想写，还是趁着有空赶紧写个小鱼缸吧

大概思路：
文字阴影效果+延时动画

效果图：
https://m.paipai.fm/r7856628

直接上代码：
直接复制粘贴！【大写】
===========================================================
<div id='ztxg'>
        <span style="animation-delay:0.1s">生</span>
        <span style="animation-delay:0.2s">日</span>
        <span style="animation-delay:0.3s">快</span>
        <span style="animation-delay:0.4s">乐</span>
        <span style="animation-delay:0.5s">呀</span>

        <span style="animation-delay:0.6s;margin-left:20px;">B</span>
        <span style="animation-delay:0.7s">i</span>
        <span style="animation-delay:0.8s">r</span>
        <span style="animation-delay:0.9s">t</span>
        <span style="animation-delay:1s">h</span>
        <span style="animation-delay:1.1s">d</span>
        <span style="animation-delay:1.2s">a</span>
        <span style="animation-delay:1.3s">y</span>

        <span style="animation-delay:1.4s;margin-left: 20px;">T</span>
        <span style="animation-delay:1.5s">o</span>

        <span style="animation-delay:1.6s;margin-left: 20px;">Y</span>
        <span style="animation-delay:1.7s">o</span>
        <span style="animation-delay:1.8s">u</span>
</div>

<style>
#ztxg{
background-color:rgba(255,255,255,0.9);
padding:20px 5px 10px 10px;    
}
#ztxg span{
animation: animate 6s linear infinite;
color:transparent;
font-size:60px;
        }
@keyframes animate{
            0%{
                color:#fff;
                filter:blur(1px) hue-rotate(0deg);
                text-shadow:0 0 10px #ffb59c,
                0 0 20px #ffb59c,
                0 0 30px #ffb59c,
                0 0 40px #ffb59c;
            }
             30%,70%{
                color:#fff;
                filter:blur(1px) hue-rotate(360deg);
                text-shadow:0 0 10px #f3d4ca,
                0 0 20px #f3d4ca,
                0 0 30px #f3d4ca,
                0 0 30px #f3d4ca;
            }
          100%{
                color:transparent;
                box-shadow: none;
                filter:blur(1px) hue-rotate(0deg);
            }
   }
   </style>      



注：
这里比较麻烦的就是字是一个个写的，然后把延时时间写上。
# <span style="animation-delay:0.1s">
animation-delay:0.1s 这个就是动画延时0.1s

<span style="margin-left:20px;">这里的margin-left:20px就是字之间的空隙；
如果不想这么写的话，换成下面的方式也行，哪里需要空格就自己打进去。&nbsp就是空格的转义字符。
<span>&nbsp</span>

大概说下，创建一个ztxg块盒子，里面用<span>标签填上想写的内容。
对里面的span标签都设置动画延迟的时间。
填充下背景，块盒子设置下各向里的内边距。

对要写的文字内容，设置成透明的，设置大小，应用创建的动画。
动画是animate，创建了文字阴影的动画效果。

有一点点繁琐，就是字需要一个个写，时间也要一个个改。很烦！
用这个写写什么大的标题啥的还可以，写一段话感觉就是让我死。


越来越懒了，这个小鱼缸怎么这么难！！！！
从半途到放弃


有问题的话直接私信~