论坛 › 马黑黑教程专版 › 纯CSS+HTML：文本融合散开效果

马黑黑 发表于 2023-4-15 13:12

纯CSS+HTML：文本融合散开效果

<style>
.mybox {
margin: 20px auto;
width: 720px;
height: 460px;
display: grid;
place-items: center;
background: #333;
filter: contrast(30);
}
.mybox > p {
        font: bold 60px / 60px sans-serif;
        color: #aaa;
        animation: move 6s infinite alternate;
}

@keyframes move {
        20% { letter-spacing: -60px; filter: blur(10px); }
        30% { letter-spacing: -20px; filter: blur(2px); }
        60% { letter-spacing: 60px; filter: blur(0px); }
}
</style>

<div class="mybox">
        <p>花潮論壇</p>
</div>

马黑黑 发表于 2023-4-15 13:12

代码
<style>
.mybox {
margin: 20px auto;
width: 720px;
height: 460px;
display: grid;
place-items: center;
background: #333;
filter: contrast(30);
}
.mybox > p {
        font: bold 60px / 60px sans-serif;
        color: #aaa;
        animation: move 6s infinite alternate;
}

@keyframes move {
        20% { letter-spacing: -60px; filter: blur(10px); }
        30% { letter-spacing: -20px; filter: blur(2px); }
        60% { letter-spacing: 60px; filter: blur(0px); }
}
</style>

<div class="mybox">
        <p>花潮論壇</p>
</div>

马黑黑 发表于 2023-4-15 13:13

本帖最后由 马黑黑 于 2023-4-15 17:03 编辑

改变文本颜色，会得到不同的效果，有些效果还很意外

马黑黑 发表于 2023-4-15 13:27

原理：

一、关于融合：

主元素使用对比度滤镜 + 子元素用模糊滤镜，会令子元素彼此接触时产生融合效果。

主元素必须设置背景色为实色，不能不设置，不能是 none 或 transparent。

二、关于文本融合原理

本例，我没有设置子元素彼此接触，而是令子元素上的文本通过改变 letter-spacing 距离来让文字拉近拉开，效果上和元素间的接触交融是同一个道理。模糊滤镜用在关键帧动画里，作用于例子中的子元素。

马黑黑 发表于 2023-4-15 13:31

本帖最后由 马黑黑 于 2023-4-15 13:33 编辑

下面这组代码是两个伪元素彼此靠近后产生的局部融合效果：
<style>
.box {
width: 800px;
height: 600px;
display: grid;
place-items: center;
background: #fff;
filter: contrast(30);
}
.box::before, .box::after {
position: absolute;
content: '';
width: 150px;
height: 150px;
border-radius: 50%;
background-color: blue;
filter: blur(15px);
}
.box::before { transform: translate(-75px); }
.box::after { transform: translate(75px); }
</style>

<div class="box"></div>

马黑黑 发表于 2023-4-15 13:32

本帖最后由 马黑黑 于 2023-4-15 21:56 编辑 <br /><br /><style>
.box22 {
width: 760px;
height: 460px;
display: grid;
place-items: center;
background: #fff;
filter: contrast(30);
}
.box22::before, .box22::after {
position: absolute;
content: '';
width: 150px;
height: 150px;
border-radius: 50%;
background-color: blue;
filter: blur(15px);
}
.box22::before { transform: translate(-75px); }
.box22::after { transform: translate(75px); }
</style>

<div class="box22"></div>

樵歌 发表于 2023-4-15 15:38

感觉有大用{:4_181:}

梦缘 发表于 2023-4-15 15:48

谢谢老师的代码分享，问好！{:4_180:}

马黑黑 发表于 2023-4-15 17:02

梦缘 发表于 2023-4-15 15:48
谢谢老师的代码分享，问好！

{:4_191:}

红影 发表于 2023-4-15 19:52

滤镜还有这样的作用啊，这个有趣{:4_187:}

红影 发表于 2023-4-15 20:05

马黑黑 发表于 2023-4-15 13:13
改变文本颜色，会得到不同的效果，有些效果还很意外

是指每个文字设置不同的颜色么？还是一起换成别的颜色？

马黑黑 发表于 2023-4-15 20:43

红影 发表于 2023-4-15 20:05
是指每个文字设置不同的颜色么？还是一起换成别的颜色？

不能是每一个文字。文字在一个元素上，都是同一个前景色

马黑黑 发表于 2023-4-15 20:43

红影 发表于 2023-4-15 19:52
滤镜还有这样的作用啊，这个有趣

其实这个也介绍过

雨中悄然 发表于 2023-4-15 21:25

filter: contrast(200%);sepia(60%); 改这个字颜色就变了。

马黑黑 发表于 2023-4-15 21:27

雨中悄然 发表于 2023-4-15 21:25
filter: contrast(200%);sepia(60%); 改这个字颜色就变了。

滤镜会影响很多东西，包括颜色。

雨中悄然 发表于 2023-4-15 21:30

<style>
.box {
width: 800px;
height: 600px;
display: grid;
place-items: center;
background: #fff;
filter: hue-rotate(90deg);
}
.box::before, .box::after {
position: absolute;
content: '';
width: 150px;
height: 150px;
border-radius: 50%;
background-color: blue;
filter: blur(15px);
}
.box::before { transform: translate(-75px); }
.box::after { transform: translate(75px); }
</style>

<div class="box"></div>

雨中悄然 发表于 2023-4-15 21:31

马黑黑 发表于 2023-4-15 21:27
滤镜会影响很多东西，包括颜色。

就是颜色变化最明显，且不可控，滤镜加上就不知道变啥色儿了。。

马黑黑 发表于 2023-4-15 21:56

雨中悄然 发表于 2023-4-15 21:31
就是颜色变化最明显，且不可控，滤镜加上就不知道变啥色儿了。。

就这效果

马黑黑 发表于 2023-4-15 21:57

樵歌 发表于 2023-4-15 15:38
感觉有大用

应该有用

樵歌 发表于 2023-4-16 07:46

马黑黑 发表于 2023-4-15 21:57
应该有用

用处很大{:4_189:}

查看完整版本: 纯CSS+HTML：文本融合散开效果