怎么使用纯CSS实现锡纸撕开的文字效果

小编给大家分享一下怎么使用纯CSS实现锡纸撕开的文字效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

我们提供的服务有：网站制作、成都网站设计、微信公众号开发、网站优化、网站认证、泰安ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的泰安网站制作公司

代码解读

定义dom，容器中包含若干子元素，每个子元素中包含一个字母：

<divclass="text">

<span>A</span>

<span>W</span>

<span>E</span>

<span>S</span>

<span>O</span>

<span>M</span>

<span>E</span>

</div>

定义容器尺寸：

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实现锡纸撕开的文字效果
标题来源：https://www.cdcxhl.com/article48/gipchp.html

成都网站建设公司_创新互联，为您提供定制开发、网站内链、外贸网站建设、App设计、定制网站、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联