使用CSS制作非常好看的艺术文字特效
HTML结构
在HTML这个项目再简单不过了。
它只是一个内部带有文本元素的div。
<div class="background">
<h1>GALAXY</h1>
</div>
而已！
CSS文字效果
好吧，让我们以背景div为中心开始。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
我们正在使用flexbox将体内任何物体居中。如果您只是样式一个元素，这是一种通用的方法。
现在我们需要设置背景div。
.background {
background: url("https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1957&q=80")
center;
background-size: cover;
}
好的，这样背景就会收到图像，我们将尺寸设置为
cover。所以现在我们应该看到类似的东西。
这是一个开始，但与我们想要的效果有点相反。
因此，让我们继续设计文本元素的样式。
h1 {
font-size: 15vw;
font-weight: bold;
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
color: #000;
background: #fff;
mix-blend-mode: lighten;
}
首先，我们设置一个大字体。我正在使用视口大小来使其响应。
然后我们将颜色设置为黑色，背景设置为白色。这给了它一个完整的对比。您还可以更改颜色以获得很酷的alpha效果！
最后一步是启用混合混合模式。由于我们使用的是全对比度（黑/白），它将完全删除黑色文本并显示其中的任何内容！
浏览器支持
混合混合模式不完全支持。Internet Explorer一个，将不会渲染它。
免责声明:
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » 使用CSS制作非常好看的艺术文字特效
1. 本站资源转自互联网，源码资源分享仅供交流学习，下载后切勿用于商业用途，否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议，可自由转载、引用，但需署名原版权作者且注明文章出处
3. 未登录无法下载，登录使用金币下载所有资源。
IT小站 » 使用CSS制作非常好看的艺术文字特效
常见问题FAQ
- 没有金币/金币不足 怎么办？
- 本站已开通每日签到送金币，每日签到赠送五枚金币，金币可累积。
- 所有资源普通会员都能下载吗？
- 本站所有资源普通会员都可以下载，需要消耗金币下载的白金会员资源，通过每日签到，即可获取免费金币，金币可累积使用。
