小編給大家分享一下怎么使用純CSS實現(xiàn)錫紙撕開的文字效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
我們提供的服務(wù)有：網(wǎng)站制作、成都網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、泰安ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的泰安網(wǎng)站制作公司
代碼解讀
定義dom，容器中包含若干子元素，每個子元素中包含一個字母：
A
W
E
S
O
M
E
定義容器尺寸：
body{
margin:0;
height:100vh;
}
.text{
width:100%;
height:100%;
}
設(shè)置子元素的布局方式：
.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;
}
設(shè)置文本的背景的漸變色，奇數(shù)位的文字和偶數(shù)位的文字的漸變方向是相反的：
.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實現(xiàn)錫紙撕開的文字效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
