分享给大家两个svg画的波浪线分享给大家两个svg画的波浪线

效果图一:

文章图片
图片.png
代码:
css部分

.nectar-shape-divider { width: 100%; left: 0; bottom: -1px; height: 100%; position: absolute; } .nectar-shape-divider-wrap { position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 150px; z-index: 2; transform: translateZ(0); }.post-area.span_9 .nectar-shape-divider-wrap { overflow: hidden; }.nectar-shape-divider-wrap[data-position="top"] { top: -1px; bottom: auto; } .nectar-shape-divider-wrap[data-position="top"] { transform: rotate(180deg) }.nectar-shape-divider-wrap[data-front="true"] { z-index: 50; }.nectar-shape-divider-wrap[data-style="fan"] svg { width: 102%; left: -1%; } .nectar-shape-divider-wrap[data-style="fan"] svg polygon:nth-child(2) { opacity: 0.15; } .nectar-shape-divider-wrap[data-style="fan"] svg rect { opacity: 0.3; }.nectar-shape-divider-wrap[data-style="mountains"] svg path:first-child { opacity: 0.1; } .nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(2) { opacity: 0.12; } .nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(3) { opacity: 0.18; } .nectar-shape-divider-wrap[data-style="mountains"] svg path:nth-child(4) { opacity: 0.33; }.nectar-shape-divider-wrap[data-style="curve_opacity"] svg path:nth-child(1), .nectar-shape-divider-wrap[data-style="waves_opacity_alt"] svg path:nth-child(1) { opacity: 0.15; } .nectar-shape-divider-wrap[data-style="curve_opacity"] svg path:nth-child(2), .nectar-shape-divider-wrap[data-style="waves_opacity_alt"] svg path:nth-child(2) { opacity: 0.3; }

html部分

效果图二: