怎么使用纯CSS代码实现文字断开的动画效果
这篇文章将为大家详细讲解有关怎么使用纯CSS代码实现文字断开的动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南川免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
代码解读
定义dom,只有一个元素,元素有一个data-text属性,属性值等于元素内的文本:
居中显示:
html,body{
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
设置渐变背景色:
body{
background:linear-gradient(brown,sandybrown);
}
设置文本的字体字号:
.text{
font-size:5em;
font-family:"arialblack";
}
利用伪元素增加文字:
.text{
position:relative;
}
.text::before,
.text::after{
content:attr(data-text);
position:absolute;
top:0;
left:0;
color:lightyellow;
}
设置左侧文字的遮罩:
.text::before{
background-color:darkgreen;
clip-path:polygon(00,60%0,30%100%,0100%);
}
设置右侧文字的背景和遮罩:
.text::after{
background-color:darkblue;
clip-path:polygon(60%0,100%0,100%100%,30%100%);
}
当鼠标划过时,遮罩的文字分别向两侧偏移:
.text::before,
.text::after{
transition:0.2s;
}
.text:hover::before{
left:-0.15em;
}
.text:hover::after{
left:0.15em;
}
隐藏辅助元素,包括原始文字和伪元素的背景色:
.text{
color:transparent;
}
.text::before{
/*background-color:darkgreen;*/
}
.text::after{
/*background-color:darkblue;*/
}
两侧文字增加歪斜效果:
.text:hover::before{
transform:rotate(-5deg);
}
.text:hover::after{
transform:rotate(5deg);
}
微调文字的高度:
.text:hover::before{
top:-0.05em;
}
.text:hover::after{
top:0.05em;
}
关于“怎么使用纯CSS代码实现文字断开的动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站标题:怎么使用纯CSS代码实现文字断开的动画效果
标题来源:http://scyanting.com/article/pssjog.html