当前位置：首页 > article >正文

【css酷炫效果】纯CSS实现波浪形分割线

article 2025/3/20 2:31:00

【css酷炫效果】纯CSS实现波浪形分割线

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492023

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

  <div class="wavy-divider"></div>

css样式

:root {
  --wave-color-1: #00b4d8;
  --wave-color-2: #90e0ef;
  --wave-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.6c20-7 40-7 60 4.8 20 11.8 40 11.8 60 0V30H0z' fill='white'/%3E%3C/svg%3E");
}

.wavy-divider {
  width: 100%;
  height: 80px;
  background: linear-gradient(90deg, 
    var(--wave-color-1), 
    var(--wave-color-2));
  mask-image: var(--wave-svg);
  mask-size: 120px 30px;
  mask-repeat: repeat-x;
  mask-position: 0 bottom;
  animation: wave-flow 1.5s linear infinite;
  position: relative;
  margin: 50px 0;
}

/* 第二层波浪增强效果 */
.wavy-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    var(--wave-color-2), 
    var(--wave-color-1));
  mask-image: var(--wave-svg);
  mask-size: 120px 30px;
  mask-repeat: repeat-x;
  mask-position: 60px bottom;
  opacity: 0.5;
}
  
@keyframes wave-flow {
  0% { 
    -webkit-mask-position: 0 bottom;
            mask-position: 0 bottom;
  }
  100% { 
    -webkit-mask-position: -120px bottom; /* 完整写法 */
            mask-position: -120px bottom;
  }
}

完整代码

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --wave-color-1: #00b4d8;
  --wave-color-2: #90e0ef;
  --wave-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.6c20-7 40-7 60 4.8 20 11.8 40 11.8 60 0V30H0z' fill='white'/%3E%3C/svg%3E");
}

.wavy-divider {
  width: 100%;
  height: 80px;
  background: linear-gradient(90deg, 
    var(--wave-color-1), 
    var(--wave-color-2));
  mask-image: var(--wave-svg);
  mask-size: 120px 30px;
  mask-repeat: repeat-x;
  mask-position: 0 bottom;
  animation: wave-flow 1.5s linear infinite;
  position: relative;
  margin: 50px 0;
}

/* 第二层波浪增强效果 */
.wavy-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    var(--wave-color-2), 
    var(--wave-color-1));
  mask-image: var(--wave-svg);
  mask-size: 120px 30px;
  mask-repeat: repeat-x;
  mask-position: 60px bottom;
  opacity: 0.5;
}
  
@keyframes wave-flow {
  0% { 
    -webkit-mask-position: 0 bottom;
            mask-position: 0 bottom;
  }
  100% { 
    -webkit-mask-position: -120px bottom; /* 完整写法 */
            mask-position: -120px bottom;
  }
}
</style>
</head>
<body>
  <div class="wavy-divider"></div>
</body>
</html>