css实现文字的条纹阴影效果
先写下一段文字
添加重复的线性渐变,该渐变倾斜45deg(倾斜角度依需求设置)
上面的为黑色、透明色的渐变,实际上渐变的颜色需要跟文字的背景颜色相同,如果文字的背景色是白色那么渐变的颜色就是白色、透明色,白色用来融入背景,透明色用来显示被遮住的文字,如下:
写下相同的文字,覆盖条纹阴影,调整文字的位置即可
代码如下:
<div class="DarkBox" data-descr="Dark Side">Dark Side</div>
.DarkBox{
margin:50px;
width: 700px;
height: 80px;
line-height: 80px;
text-align: center;
font-family: 'GandiaBold';
position: relative;
color: #858585;
font-size: 60px;
&::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(45deg,#fff 0px 2px , transparent 2px 4px);
}
&::after{
content: attr(data-descr);
position: absolute;
width: 100%;
height: 100%;
left: -4px;
top: -4px;
color: #333333;
}
}
伪元素动态值
这里有一个小知识点,伪元素的的content
可以设置动态值,页面标签中设置data-descr="xxx"
,伪元素content
中的值为attr(data-descr)
那么伪元素的data-descr
就是页面标签中设置的'xxx'
,如果页面标签中的data-descr
属性写成动态值,如:data-descr='textInfo'
,那么伪元素attr(data-descr)
的值会进行关联变成动态值。
<div class="text" :data-descr='textInfo' @click="textChange"></div>
const textInfo = ref('点击更改')
const textChange = () => textInfo.value = '动态值'
.text{
text-align: center;
position: relative;
color: #858585;
font-size: 60px;
cursor:pointer;
&::before{
content: attr(data-descr);
position: absolute;
color: #333333;
}
}
应用在刚才的案例上:
案例源码:https://gitee.com/wang_fan_w/css-diary
如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~