关于前端: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

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~