使用CSS制作非常好看的艺术文字特效

作者 : IT 大叔 本文共839个字,预计阅读时间需要3分钟 发布时间: 2020-10-20

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

所以现在我们应该看到类似的东西。

使用CSS制作非常好看的艺术文字特效插图

这是一个开始,但与我们想要的效果有点相反。
因此,让我们继续设计文本元素的样式。

h1 {
  font-size: 15vw;
  font-weight: bold;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  background: #fff;
    mix-blend-mode: lighten;
}
首先,我们设置一个大字体。我正在使用视口大小来使其响应。

然后我们将颜色设置为黑色,背景设置为白色。这给了它一个完整的对比。您还可以更改颜色以获得很酷的alpha效果!

最后一步是启用混合混合模式。由于我们使用的是全对比度(黑/白),它将完全删除黑色文本并显示其中的任何内容!

使用CSS制作非常好看的艺术文字特效插图(2)

浏览器支持

混合混合模式不完全支持。Internet Explorer一个,将不会渲染它。

使用CSS制作非常好看的艺术文字特效插图(4)

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用CSS制作非常好看的艺术文字特效

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论