大佬教程收集整理的这篇文章主要介绍了CSS或SVG中的波形,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
.wave1 { left: 0%; margin-left: -50px; } .wave2 { margin-left: -69px; } .wave3 { margin-left: -69px; } .wave4 { margin-left: -69px; } .waves { width: 200%; clear: none; z-index: 100; position: absolute; margin-top: 200px; margin-left: -150px; } .waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; BACkground-color: #fff; } .bottom-half { width: 100%; height: 50%; top: 70%; position: absolute; BACkground-color: #fff; } .BACkground-waves { width: 200%; clear: none; z-index: 50; position: absolute; margin-top: 190px; margin-left: 75px; } .bwave1 { left: 0%; margin-left: -50px; } .bwave2 { margin-left: -69px; } .bwave3 { margin-left: -69px; } .bwave4 { margin-left: -69px; } .BACkground-waves div { float: left; width: 500px; height: 100px; border: solid 5px #000; border-color: transparent; border-radius: 70%/100px 100px 0 0; BACkground-color: #fff; opacity: 0.5; }
<div class="waves"> <div class="wave1"></div> <div class="wave2"></div> <div class="wave3"></div> <div class="wave4"></div> <div class="wave5"></div> </div> <div class="BACkground-waves"> <div class="bwave1"></div> <div class="bwave2"></div> <div class="bwave3"></div> <div class="bwave4"></div> <div class="bwave5"></div> </div>
svg{ BACkground:url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center; BACkground-size:cover; width:100%; display:block; }
<svg viewbox="0 0 100 25"> <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" /> <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" /> </svg>
以上是大佬教程为你收集整理的CSS或SVG中的波形全部内容,希望文章能够帮你解决CSS或SVG中的波形所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。