【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>
效果图
