越拖越不想写,还是趁着有空赶紧写个小鱼缸吧
大概思路:
文字阴影效果+延时动画
效果图:
https://www.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就是字之间的空隙;
如果不想这么写的话,换成下面的方式也行,哪里需要空格就自己打进去。 就是空格的转义字符。
<span> </span>
大概说下,创建一个ztxg块盒子,里面用<span>标签填上想写的内容。
对里面的span标签都设置动画延迟的时间。
填充下背景,块盒子设置下各向里的内边距。
对要写的文字内容,设置成透明的,设置大小,应用创建的动画。
动画是animate,创建了文字阴影的动画效果。
有一点点繁琐,就是字需要一个个写,时间也要一个个改。很烦!
用这个写写什么大的标题啥的还可以,写一段话感觉就是让我死。
越来越懒了,这个小鱼缸怎么这么难!!!!
从半途到放弃
有问题的话直接私信~
[ 此帖被裴之在2024-07-23 09:04重新编辑 ]