教程开始
第一步：
parts 文件下 search.php 倒数第三个</div>前添加以下代码
<div class="awaves"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" x="48" y="0" fill="rgba(255,255,255,0.7"></use> <use xlink:href="#gentle-wave" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" x="48" y="3" fill="rgba(255,255,255,0.5)"></use> <use xlink:href="#gentle-wave" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" x="48" y="5" fill="rgba(255,255,255,0.3)"></use> <use xlink:href="#gentle-wave" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" x="48" y="7" fill="#fff"></use> </g> </svg> </div>
第二步：
添加 CSS
.awaves { background: linear-gradient(60deg, rgb(252, 185, 62) 0%, rgb(255, 111, 132) 100%); padding-top: 320px; z-index: -1; position: absolute; bottom: 0; width: 100%; } .waves { position: relative; width: 100%; height: 10vh; margin-bottom: -6px; min-height: 100px; max-height: 150px; } .parallax>use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } .parallax>use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax>use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax>use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax>use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
效果图如下
