[分享]css中hr波浪线样式

CSS中的hr元素是一个非常常见的水平分割线，而在这个分割线的样式中，我们可以应用波浪线样式，让这个元素更加美观。hr { border: none; bordertop: 2px solid ccc...

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()函数来实现了水平方向的位移。

总的来说，这个波浪线样式非常简单实用，可以运用在各种项目的分割线要求上，增加页面的美观度和设计感。如果你想要在自己的项目中增加一些独特的风格和创意，波浪线样式绝对是个不错的选择。