文字效果集中营

马黑黑

红影 发表于 2022-3-31 11:13
看到楼下的字了，真漂亮

还行，一般般

红影

马黑黑 发表于 2022-3-31 12:12
来回有路线是，alternate的作用是单向循环的动画变为双向循环

怪不得，这个是用文字倾斜，不一样的。

红影

马黑黑 发表于 2022-3-31 12:15
没有变字体的，是设置了 font-style 字体样式的变化

嗯嗯，明白了，谢谢黑黑。用这个跳舞字作了个帖子，觉得挺有趣的

马黑黑

红影 发表于 2022-3-31 13:09
嗯嗯，明白了，谢谢黑黑。用这个跳舞字作了个帖子，觉得挺有趣的

欣赏过来，元素很丰富

马黑黑

红影 发表于 2022-3-31 13:09
怪不得，这个是用文字倾斜，不一样的。

对，慢慢就能理解了

红影

马黑黑 发表于 2022-3-31 13:29
欣赏过来，元素很丰富

这个功能真好玩，文字真的像活过来了似的

红影

马黑黑 发表于 2022-3-31 13:30
对，慢慢就能理解了

嗯，本来不明白，看到你的解说，现在知道了

马黑黑

红影 发表于 2022-3-31 20:25
嗯，本来不明白，看到你的解说，现在知道了

就是说呀，如果有时间有心情有条件，还是完整学习一下HTML、CSS、JS

马黑黑

红影 发表于 2022-3-31 20:25
这个功能真好玩，文字真的像活过来了似的

本来是常见的，就是没人用到动画中

马黑黑

模糊文本:

Hello CSS!
Hello HTML!
Hello Javascript!
上海挺住！
中国挺住！

马黑黑

350#代码：

<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>

马黑黑

350#模糊文本原理解释：

前景色设置为 transparent（透明），然后借助 text-shadow 即文本阴影的 rgba 颜色设置方式渲染文本呈现的颜色，通过调节 alpha 通道，即 rgba 的最末一个值，来完成实际的模糊效果。

alpha 值取值 0~1之间，包含 0 和 1，为 0 时完全不可见，为 1 时没有透明度。

马黑黑

Hello CSS!
Hello HTML!
Hello Javascript!
上海挺住！
中国挺住！

马黑黑

353# 代码：

1. <style>
   
2. .txtblur {
   
3.    font: bold 4em/1.2em Sans-serif;
   
4.    color: rgba(0, 100, 0 ,0.4);
   
5.    text-shadow:  2px 2px 4px #333;
   
6. }
   
7. </style>
   
8. 
   
9. <div class="txtblur">
   
10.    Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
    
11. </div>

复制代码

设置前景色为模糊，配上阴影。前景色alpha值越小，文本整体颜色受到阴影色的影响就越大。

马黑黑

Hello CSS!
Hello HTML!
Hello Javascript!
上海挺住！
中国挺住！

马黑黑

355楼代码：

1. <style>
   
2. .txtblur1 {
   
3.    font: bold 4em/1.2em Sans-serif;
   
4.    color: darkgreen;
   
5.    text-shadow:  2px 2px 2px #333;
   
6.    filter: blur(2px);
   
7. }
   
8. </style>
   
9. 
   
10. <div class="txtblur1">
    
11.    Hello CSS!<br>Hello HTML!<br>Hello Javascript!<br>上海挺住！<br>中国挺住！
    
12. </div>

复制代码

直接使用 filter 的 blur() 滤镜达到模糊效果。filter其实是针对盒子，blur()产生的模糊不直接针对文字。

红影

马黑黑 发表于 2022-3-31 20:50
就是说呀，如果有时间有心情有条件，还是完整学习一下HTML、CSS、JS

我还是跟在后面学一点是一点吧，没那么大本事系统去学

红影

马黑黑 发表于 2022-3-31 20:50
本来是常见的，就是没人用到动画中

饿呢你，真用到动画里也挺好玩的呢

红影

马黑黑 发表于 2022-4-1 12:22
355楼代码：
直接使用 filter 的 blur() 滤镜达到模糊效果。filter其实是针对盒子，blur()产生的模糊不直 ...

原来有这么多种文字模糊的方式呢

马黑黑

红影 发表于 2022-4-1 22:55
原来有这么多种文字模糊的方式呢

条条道路通水吧