آموزش موج های متحرک وب سایت وبکیما
کد های HTML :
<div class="wva"> <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" x="48" y="0" fill="rgba(255,255,255,0.7"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use> <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use> <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use> </g> </svg> </div>
کد های css :
.wva { margin-top: -75px; pointer-events: none; } svg { max-width: 100%!important; } .waves { position: relative; width: 100%; height: 15vh; margin-bottom: -10px; min-height: 70px; max-height: 100px; } svg:not(:root) { overflow: hidden; } .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); } } @media screen and (max-width: 576px){ .wva{ display: none; } }
پدیدار مارکتینگ ارائه دهنده خدمات طراحی سایت در رشت ، گیلان و سراسر کشور
ما را در اینستاگرام دنبال کنید : padidarmarketing@
سلام
قسمت کادر کد با چه افزونه به این صورت قرار دادید در سایت
افزونه خاصی نیاز نیست با المنتور انجام میشه