html - 通过向每个文本元素添加一个类来重新创建文本效果
问题描述
我想通过为每个文本元素添加一个类来获得这种漂亮的文本效果:
这是上图的原始代码。
https://codepen.io/pixy-dixy/pen/GRNwmWv
这段代码的问题是他使用属性来创建这样的文本效果,但我想使用一个可以添加到任何文本元素的简单类。
我试图创建该类但没有运气:
这是我到目前为止所尝试的:
.effect {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
text-align: center;
font-weight: 400;
width: 100%;
text-align: center;
font-size: 5vw;
color: rgba(255, 255, 255, 0.5);
position: absolute;
z-index: 3;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(-45deg, red 25%, white 25%, white 50%, red 50%, red 75.2%, white 75%, white);
background-size: 10px 10px;
background-position: 0 0;
mix-blend-mode: overlay;
font-variation-settings: "GLOW" 1000;
filter: invert(0.7) grayscale(1);
position: absolute;
z-index: 2;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2), 2px 2px 1px rgba(255, 255, 255, 0.3), 1px 1px 1px rgba(138, 0, 0, 0.53), 1px 1px 1px white;
}
<h1 class="effect">candy</h1>
有没有通过添加类来拥有文本元素的解决方案?
解决方案
text-shadow
不能很好地与background-clip:text
. 使用阴影并调整代码如下:
.effect {
font-weight: 400;
text-align: center;
font-size: 150px;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: repeating-linear-gradient(-45deg, #c50000 0 5px, #c3c0c0 0 10px);
filter:drop-shadow(4px 4px 4px rgba(0,0,0,0.8));
}
<h1 class="effect">candy</h1>
推荐阅读
- docker - 在 Docker 客户端上配置代理后,Docker 容器内没有 http/https 连接
- graphql - 如何为 apollo 客户端生成片段类型?
- javascript - 如何在一定数量后结束我的图像网格并添加额外的页面以滚动浏览?
- javascript - 如何在前端和后端验证必填字段
- sql - 如何在 SQL 中混合两个结果(包括示例)
- python-3.x - 代码不兼容问题 - Python 2.x/ Python 3.x
- node.js - 如何为 Google 智能家居操作设置和部署本地执行应用程序?
- math - 混合有序树和无序树
- php - 循环遍历多维数组
- python - 如何在python中进行httprequest