重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么使用纯CSS实现锡纸撕开的文字效果
小编给大家分享一下怎么使用纯CSS实现锡纸撕开的文字效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
我们提供的服务有：网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、泰安ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的泰安网站制作公司
代码解读
定义dom，容器中包含若干子元素，每个子元素中包含一个字母：
A
W
E
S
O
M
E
定义容器尺寸：
body{
margin:0;
height:100vh;
}
.text{
width:100%;
height:100%;
}
设置子元素的布局方式：
.text{
display:flex;
justify-content:space-between;
}
.textspan{
width:100%;
}
定义文本样式：
.textspan{
color:darkslategray;
background-color:rgb(127,140,141);
font-family:serif;
font-size:12vmin;
text-shadow:1px1px1pxwhite;
display:flex;
align-items:center;
justify-content:center;
}
设置文本的背景的渐变色，奇数位的文字和偶数位的文字的渐变方向是相反的：
.textspan:nth-child(odd){
background:linear-gradient(
tobottom,
rgba(127,140,141,0.2)0%,
rgba(127,140,141,0)33%,
rgba(127,140,141,0.7)66%,
rgba(127,140,141,0.2)100%
);
}
.textspan:nth-child(even){
background:linear-gradient(
totop,
rgba(127,140,141,0.2)0%,
rgba(127,140,141,0)33%,
rgba(127,140,141,0.7)66%,
rgba(127,140,141,0.2)100%
);
}
增加文字之间的分隔线，第1个文字之前不用加分隔线：
.textspan{
position:relative;
}
.textspan:not(:first-child)::before{
content:'';
position:absolute;
width:10px;
height:90%;
background-color:black;
left:-5px;
border-left:1pxsolidwhite;
border-radius:50%;
}
让分隔线上下错位：
.textspan:not(:first-child):nth-child(odd)::before{
top:2%;
}
.textspan:not(:first-child):nth-child(even)::before{
bottom:2%;
}
以上是“怎么使用纯CSS实现锡纸撕开的文字效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文标题：怎么使用纯CSS实现锡纸撕开的文字效果
本文路径：http://cqcxhl.cn/article/gipchp.html