来源：未知 时间：2024-06-10 17:13 作者：小飞侠 阅读:次
[导读] 要实现文字镂空需要借助CSS的 mix-blend-mode 混合效果，类似PS的滤镜。 效果图如下: 代码如下： !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocume...
|
要实现文字镂空需要借助CSS的 mix-blend-mode 混合效果，类似PS的滤镜。 效果图如下:
代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0; padding: 0;
}
.blend{
width: calc(100%);
height: calc(100vh);
background-image:url('./xingkong.jpeg'); //自己随便找个图片即可
display: flex;
justify-content: center;
align-items: center;
}
.box{
color: #000000; // 核心代码
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e18915; //核心代码
mix-blend-mode: screen; //核心代码
clip-path: circle(50%);
}
.box p {
font-size: 8em;
}
</style>
</head>
<body>
<div class="blend">
<div class="box">
<p>你好</p>
</div>
</div>
</body>
</html>思路：screen滤镜有个特点，会把上下两个[图像]（背景色也是图像）取最亮的光线部分，换句话说，如果白色就完全不透明，黑色就完全被下层图光线穿透！ svg实现效果图：
代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0; padding: 0;
}
.blend{
width: calc(100%);
height: calc(100vh);
background-image:url('./xingkong.jpeg');
display: flex;
justify-content: center;
align-items: center;
/* opacity: 0.9; */
isolation: isolate;
}
.box{
color: #000000;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e18915;
mix-blend-mode: multiply;
clip-path: circle(50%);
margin-left: -100px;
}
.box:nth-child(even){
background-color: #e14115;
}
.box p {
font-size: 8em;
}
.universe-title{
width: 400px;
height: 120px;
background-color: #e18915;
mix-blend-mode: screen;
}
.universe-title text{
fill: #000000;
text-transform: uppercase;
}
.uspan1{
font-size: 53.2px;
}
.uspan2{
font-size: 96.2px;
}
</style>
</head>
<body>
<div class="blend">
<div class="universe-title">
<svg viewBox="0 0 490 120" role="presentation">
<text>
<tspan class="uspan1" x="6" dy="0.8em">The Observable</tspan>
<tspan class="uspan2" x="3" dy="0.75em">Universe</tspan>
</text>
</svg>
</div>
</div>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
