css的字体正片叠底和发光效果
- 前言
- 字体的正片叠底
- 效果
- 思路
- 实现
- 字体的发光
- 效果
- 思路
- 实现
- 结束
前言
大家好，我是yma16，本文分享css_字体混合正片叠底与发光。
字体的正片叠底
css混合模式
CSS混合模式是一种在两个或多个重叠对象之间创建颜色混合效果的方法。它可以通过将两个或多个颜色层叠在一起，使用不同的数学公式来创建新的混合颜色。混合模式可以用于任何CSS属性，如颜色、背景色、边框等。
CSS提供了多种混合模式，包括正常、叠加、滤色、差值、颜色加深等。每种混合模式都有不同的效果和适用场景。例如，叠加模式可以创建一种类似于阴影的效果，而颜色加深模式可以使颜色更加浓郁。
使用混合模式的基本语法如下：
.selector {
mix-blend-mode: <mode>;
}其中，<mode>是混合模式的名称，例如normal、overlay、screen等。可以将混合模式应用于任何支持颜色的属性，例如background-color、color、border-color等。
需要注意的是，混合模式可能会影响到页面的性能，因此需要合理使用。另外，混合模式在不同的浏览器中支持程度可能会有所不同，需要进行兼容性检测。
效果
思路
运用div的阴影和混合模式，适用于偏暗的背景，字体的div与背景的div叠加达到正片叠底的效果。
- box-shadow
- mix-blend-mode
实现
css
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transparent text effect</title>
</head>
<style>
body{
background: url(./background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
h1{
color:#fff;
text-transform: uppercase;
position: absolute;
top:50%;
transform: translateY(-50%);
margin:0;
padding:0;
font-size:10em;
text-align: center;
text-shadow: 0px 5px 20px rgba(0,0,0,1);
mix-blend-mode: overlay;
}
</style>
<body>
<div class="box">
<h1>
transparent text effect
</h1>
</div>
</body>
</html>字体的发光
效果
思路
应用css的伪类，实现div的图层叠加效果，原始层的阴影和伪类层的羽化作为发光
- text-shadow
- :after
- filter
实现
代码块如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lighting</title>
</head>
<style>
body{
background: url(./back.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.light{
margin:0;
padding:0;
color:#fff;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
text-shadow: 0 20px 20px #ff8800;
font-size: 6em;
}
.light:after{
position: absolute;
content: attr(data-text);
left:0;
color:#ff8800;
filter:blur(20px);
padding:0 20px;
z-index: -1;
}
</style>
<body>
<h1 class="light" data-text="[that_gril]">[that_gril]</h1>
</body>
</html>结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！