最近一点哥正在开发一款情侣模板,在制作一个波浪效果时费了半天时间,毕竟js不是很熟,然后敲了半天,终于用svg+css3搞定了这个波浪效果;截图
波浪动态效果是这样的:
div的svg
<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" /> </defs> <g class="parallax"> <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> </g> </svg>
css代码
.waves { position:relative; width: 100%; height:15vh; top: -80px; margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px; } /* Animation */ .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); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height:40px; min-height:40px; } .content { height:30vh; } h1 { font-size:24px; } }
- SEO话题
- 这是我的QQ群扫一扫
-
- wp开发交流
- 我的QQ交流群扫一扫
-
评论