马黑黑 发表于 2022-9-25 09:28
二楼效果的代码：
这个效果太吸引眼球了，黒黑的又一个新的制作出来了，无论可以不可以实现，至少现在的效果已经让我惊艳了
马黑黑 发表于 2022-9-25 12:53
也许弄不出。为什么？JS操作伪元素的能力十分有限，换个 attr 内容是可以的。所以，这个目前来讲，用来模 ...
如果太困难就别弄了，现在歌词逐字同步也很好的呢{:4_187:}
马黑黑 发表于 2022-9-25 12:54
出问题时我一下子也是蒙了，思考一阵子之后才知道原理
你思考一下能知道原理，我思考一辈子也不知道{:4_189:}
马黑黑 发表于 2022-9-25 12:54
谢谢黑黑的付出{:4_187:}
红影 发表于 2022-9-25 16:09
谢谢黑黑的付出
我这也是在实践、练习
红影 发表于 2022-9-25 16:08
你思考一下能知道原理，我思考一辈子也不知道
我思考不出结果的时候，去拖地板，一般都能想出来{:4_173:}
红影 发表于 2022-9-25 16:08
如果太困难就别弄了，现在歌词逐字同步也很好的呢
有替代方法的，不一定要用伪元素
小辣椒 发表于 2022-9-25 13:27
这个效果太吸引眼球了，黒黑的又一个新的制作出来了，无论可以不可以实现，至少现在的效果已经让我惊艳了
看着和使用背景剪裁的效果差不多（但这个是没有渐变的）
马黑黑 发表于 2022-9-25 16:42
我这也是在实践、练习
黑黑太厉害了{:4_199:}
马黑黑 发表于 2022-9-25 16:42
我思考不出结果的时候，去拖地板，一般都能想出来
那你多拖几遍，是不是能想出更多好玩的{:4_173:}
马黑黑 发表于 2022-9-25 16:43
有替代方法的，不一定要用伪元素
各种方法也只有黑黑能想出来。
<style>
#papa {
margin: auto;
width: 600px;
position: relative;
}
#fColor {
font: bold 4em sans-serif;
color: #f1faef;
position: absolute;
}
#fColor::before {
position: absolute;
content: attr(data-text);
color: red;
width: 0%;
height: 100%;
white-space: nowrap;
overflow: hidden;
animation: long 4s linear infinite;
}
@keyframes long {
from { width: 0;}
to { width: 100%; }
}
</style>
<div id="papa">
<div id="fColor" data-text="ABCDEFG">ABCDEFG</div>
</div>
红影 发表于 2022-9-25 17:32
各种方法也只有黑黑能想出来。
有一定的基础后，用心去想都能想得出来的
红影 发表于 2022-9-25 17:31
那你多拖几遍，是不是能想出更多好玩的
适得其反。要适可而止。
红影 发表于 2022-9-25 17:31
黑黑太厉害了
过得去
马黑黑 发表于 2022-9-25 17:38
有一定的基础后，用心去想都能想得出来的
问题是，这里有一定基础的，只有你了{:4_173:}
马黑黑 发表于 2022-9-25 17:38
适得其反。要适可而止。
那就换个，从拖地换成擦灰之类的{:4_173:}
马黑黑 发表于 2022-9-25 17:39
过得去
看到黑黑又弄了个新的歌词逐字同步，太厉害了{:4_187:}
红影 发表于 2022-9-25 18:48
看到黑黑又弄了个新的歌词逐字同步，太厉害了
可惜伪元素用不上。不过伪元素做文本特效，仍然是可行的。
红影 发表于 2022-9-25 18:47
那就换个，从拖地换成擦灰之类的
我就会拖地板，其他不会