红影 发表于 2022-3-31 11:13
看到楼下的字了，真漂亮
还行，一般般
马黑黑 发表于 2022-3-31 12:12
来回有路线是，alternate的作用是单向循环的动画变为双向循环
怪不得，这个是用文字倾斜，不一样的。
马黑黑 发表于 2022-3-31 12:15
没有变字体的，是设置了 font-style 字体样式的变化
嗯嗯，明白了，谢谢黑黑。用这个跳舞字作了个帖子，觉得挺有趣的{:4_173:}
红影 发表于 2022-3-31 13:09
嗯嗯，明白了，谢谢黑黑。用这个跳舞字作了个帖子，觉得挺有趣的
欣赏过来，元素很丰富
红影 发表于 2022-3-31 13:09
怪不得，这个是用文字倾斜，不一样的。
对，慢慢就能理解了
马黑黑 发表于 2022-3-31 13:29
欣赏过来，元素很丰富
这个功能真好玩，文字真的像活过来了似的{:4_173:}
马黑黑 发表于 2022-3-31 13:30
对，慢慢就能理解了
嗯，本来不明白，看到你的解说，现在知道了{:4_187:}
红影 发表于 2022-3-31 20:25
嗯，本来不明白，看到你的解说，现在知道了
就是说呀，如果有时间有心情有条件，还是完整学习一下HTML、CSS、JS
红影 发表于 2022-3-31 20:25
这个功能真好玩，文字真的像活过来了似的
本来是常见的，就是没人用到动画中
<p>模糊文本:<br></p>
<style>
.blur {
font: bold 3em/1.2em Sans-serif;
color: transparent;
text-shadow:0 0 5px rgba(0, 100, 0 ,0.6);
}
</style>
<div class="blur">
Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
</div>
<p>350#代码：</p>
<pre style="font-size: 13px;">
<style>
<span style='color: red;'>.blur </span>{
<span style='color: blue;'>font</span>: bold 3em/1.2em Sans-serif;
<span style='color: blue;'>color</span>: transparent;
<span style='color: blue;'>text-shadow</span>:0 0 5px rgba(0, 100, 0 ,0.6);
}
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"blur"</span>>
Hello CSS!<<span style='color:darkred'>br</span>>Hello HTML!<<span style='color:darkred'>br</span>>Hello Javascript!<<span style='color:darkred'>br</span>>上海挺住！<<span style='color:darkred'>br</span>>中国挺住！
<<span style='color: darkred'>/div</span>>
</pre>
350#模糊文本原理解释：
前景色设置为 transparent（透明），然后借助 text-shadow 即文本阴影的 rgba 颜色设置方式渲染文本呈现的颜色，通过调节 alpha 通道，即 rgba 的最末一个值，来完成实际的模糊效果。
alpha 值取值 0~1之间，包含 0 和 1，为 0 时完全不可见，为 1 时没有透明度。
<style>
.txtblur {
font: bold 4em/1.2em Sans-serif;
color: rgba(0, 100, 0 ,0.4);
text-shadow:2px 2px 4px #333;
}
</style>
<div class="txtblur">
Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
</div>
353# 代码：
<style>
.txtblur {
font: bold 4em/1.2em Sans-serif;
color: rgba(0, 100, 0 ,0.4);
text-shadow:2px 2px 4px #333;
}
</style>
<div class="txtblur">
Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
</div>设置前景色为模糊，配上阴影。前景色alpha值越小，文本整体颜色受到阴影色的影响就越大。
本帖最后由 马黑黑 于 2022-4-1 12:23 编辑 <br /><br /><style>
.txtblur1 {
font: bold 4em/1.2em Sans-serif;
color: darkgreen;
text-shadow:2px 2px 2px #333;
filter: blur(2px);
}
</style>
<div class="txtblur1">
Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
</div>
355楼代码：
<style>
.txtblur1 {
font: bold 4em/1.2em Sans-serif;
color: darkgreen;
text-shadow:2px 2px 2px #333;
filter: blur(2px);
}
</style>
<div class="txtblur1">
Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
</div>直接使用 filter 的 blur() 滤镜达到模糊效果。filter其实是针对盒子，blur()产生的模糊不直接针对文字。
马黑黑 发表于 2022-3-31 20:50
就是说呀，如果有时间有心情有条件，还是完整学习一下HTML、CSS、JS
我还是跟在后面学一点是一点吧，没那么大本事系统去学{:4_173:}
马黑黑 发表于 2022-3-31 20:50
本来是常见的，就是没人用到动画中
饿呢你，真用到动画里也挺好玩的呢{:4_173:}
马黑黑 发表于 2022-4-1 12:22
355楼代码：
直接使用 filter 的 blur() 滤镜达到模糊效果。filter其实是针对盒子，blur()产生的模糊不直 ...
原来有这么多种文字模糊的方式呢{:4_187:}
红影 发表于 2022-4-1 22:55
原来有这么多种文字模糊的方式呢
条条道路通水吧