文字效果2 教程_派派后花园

用户中心 游戏论坛 社区服务
发帖 回复
阅读:207 回复:12

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

刷新数据 楼层直达
裴之

ZxID:41972983


等级: 热心会员
配偶: 肚几
举报 只看楼主 使用道具 楼主   发表于: 07-22 0
越拖越不想写,还是趁着有空赶紧写个小鱼缸吧

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

效果图:
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就是字之间的空隙;
如果不想这么写的话,换成下面的方式也行,哪里需要空格就自己打进去。&nbsp就是空格的转义字符。
<span>&nbsp</span>

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

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

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


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


有问题的话直接私信~
[ 此帖被裴之在2024-07-23 09:04重新编辑 ]
本帖最近评分记录: 1 条评分 鲜花 +2021
  • 猫几°

    鲜花 +2021 08-09

    8888已试用,和上次的代码拼一起也很好

肚几

ZxID:22142768


配偶: 裴之
打工的精髓在于摸鱼~
举报 只看该作者 沙发   发表于: 07-22 0
怎么不早发!我的纪念贴就能用上了!(指指点点)

楼主留言:

下一次!回家把代码粘上来

小暉暉、

ZxID:40967197


等级: 热心会员
人生就像蒲公英看似自由卻身不由己
举报 只看该作者 板凳   发表于: 07-22 0
哇繼續來學習
謝謝分享辛苦呀
风と画

ZxID:14494537


缺番不补❤️求书请到寻书求文版块自行发帖,不看站短私信❤️
举报 只看该作者 地板   发表于: 07-22 0
好强,围观一下
附件如内容乱码,请更换阅读软件打开(例:QQ阅读)
附件如提示密码/解压失败,请重新下载并使用专业软件解压(例:解压专家)



亦茶

ZxID:9651079


等级: 热心会员
配偶: 随风叶舞
人生亦茶,茶亦人生
举报 只看该作者 4楼  发表于: 07-22 0
谢谢分享 这个喜欢
陌然°

ZxID:13315483


等级: 派派贵宾
配偶: 砒霜°
回来了!!
举报 只看该作者 5楼  发表于: 07-22 0
指指点点,今年生日已过完,只能等明年了

猫几°

ZxID:11230103


等级: 派派版主
配偶: 染丹青
2024,请对我好一点。
举报 只看该作者 6楼  发表于: 07-22 0
谢谢教程,先收藏了,回头试试



桃瑾

ZxID:78948371


配偶: 青城聿
【4.1CP】【7.20派派】【8.10家族】【9.18生日】【12.8注册】  —不补番—
举报 只看该作者 7楼  发表于: 07-22 0
哇偶厉害了
乐~
aamaio

ZxID:14175459


等级: 素材组
庸俗的懒人ᓚᘏᗢ
举报 只看该作者 8楼  发表于: 07-23 0
码住码住,收藏第一。点赞楼主
晏方知

ZxID:2778340


等级: 热心会员
时光跌跌撞撞,季节来来往往。
举报 只看该作者 9楼  发表于: 07-23 0
好强,码住码住,收藏第一

吾。茗止°

ZxID:13451103


等级: 热心会员
好运连连
举报 只看该作者 10楼  发表于: 07-23 0
哇偶,看起来真不错

我是独白。

ZxID:13553519


等级: 热心会员
周年纪念11.07
举报 只看该作者 11楼  发表于: 07-23 0
哇哦,瑞斯拜大佬,打call~
小手、揣兜

ZxID:8412342


记忆中的小时光  阵阵青草香  是谁把它留下来  留在老地方
举报 只看该作者 12楼  发表于: 08-10 0
又有新知识哈哈~
发帖 回复