CSS中的hr元素是一个非常常见的水平分割线,而在这个分割线的样式中,我们可以应用波浪线样式,让这个元素更加美观。hr { border: none; border-top: 2px solid #c
CSS中的hr元素是一个非常常见的水平分割线,而在这个分割线的样式中,我们可以应用波浪线样式,让这个元素更加美观。
hr { border: none; border-top: 2px solid #ccc; position: relative; height: 1px; margin: 25px 0; } hr:before { content: ""; display: block; height: 20px; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-radius: 50%; background-color: #ccc; } hr:after { content: ""; display: block; height: 20px; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-radius: 50%; background-color: #fff; animation: wave 1s infinite linear; } @keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
这段CSS代码中,我们首先将hr的默认样式设为无边框,然后添加了上边框,并将元素高度设为1px。紧接着,我们添加了两个伪元素:before和:after,用来形成一个波浪线的效果。
:before伪元素是一个圆形,利用它的位置和样式来形成整个波浪线的主体部分。而:after伪元素则是利用CSS3动画效果,在整个波浪线的上方运动,实现了波浪线的效果。在这个动画中,我们通过translateX()函数来实现了水平方向的位移。
总的来说,这个波浪线样式非常简单实用,可以运用在各种项目的分割线要求上,增加页面的美观度和设计感。如果你想要在自己的项目中增加一些独特的风格和创意,波浪线样式绝对是个不错的选择。
粉丝
0
关注
0
收藏
0