Alguém me ajuda com o Getwaves #2159

Squ3let0n · 2021-09-17T03:21:57Z

Squ3let0n
Sep 17, 2021

Fiz a animação das ondas porém elas não completaram na tela, ficaram faltando espaços, elas tocam na ponta da tela e voltam, era pra essas ondas serem infinitas mas não consegui isso, se alguém souber como resolver, me explique por favor, codigo do html e css abaixo

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!–– Title é o nome da pagina -->
        <title>William Brayon</title>
        <link rel="stylesheet" type="text/css" href="boostrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-ligth">
            <a class="navbar-brand" href="#">
                <img src="img/pngaaa.com-3326083.png" width="100" height="80">
            </a>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="#quemeusou">Quem eu sou</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Certificados</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contatos</a>
                </li>
              </ul>
            </div>
        </nav>
        
        <section id="quemeusou1">
          <!--continer (pega metade da pagina) container-fluid pega ela toda-->
          <div class="container-fluid quemeusou text-left padding ">
            <h2 class="conteudo1">
              Quem eu sou
            </h2>
            <img src="img/Minhafoto.png" class="rounded-circle ">
            <h6 class="texto"><br>ASDASDDSDASDDASDDJKHHHHHHHHHJKHJKJKHAHJKSDHJKASHJKASHJKDASJA</br>DJKSADSHJKADKSHJDASJKH</h6>
            
            <div>
              <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path class="wave1" fill="#0099ff" fill-opacity="1" d="M0,224L48,224C96,224,192,224,288,186.7C384,149,480,75,576,64C672,53,768,107,864,149.3C960,192,1056,224,1152,229.3C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
                <path class="wave2" fill="#66C3D0" fill-opacity="1" d="M0,64L40,90.7C80,117,160,171,240,213.3C320,256,400,288,480,282.7C560,277,640,235,720,192C800,149,880,107,960,117.3C1040,128,1120,192,1200,202.7C1280,213,1360,171,1400,149.3L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
                <path class="wave3" fill="#43818a" fill-opacity="1" d="M0,256L40,234.7C80,213,160,171,240,170.7C320,171,400,213,480,229.3C560,245,640,235,720,234.7C800,235,880,245,960,208C1040,171,1120,85,1200,90.7C1280,96,1360,192,1400,240L1440,288L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
              </svg>
            </div>

          </div>
        </section>
        <section id="Certificados">
          <div class="container-fluid text-center margin Certificados">
          <h3>Certificados</h3>
          <div class="countainer">
            <div class="row">
              <div class="col-lg-4">
               <a href="img/java.pdf" target="_blank"><img src="img/kisspng-javascript-computer-icons-software-developer-casca-javascript-logo-5b4ca5d6340fb2.9494659815317498462133.png" width="88" height="115" class="imagemesquerda"></a>             
              </div>
              <div class="col-lg-4">
                <a href="img/html certificado.pdf" target="_blank"><img src="img/html.png" width="120" height="115" class="imagemmeio"></a>             
               </div>
               <div class="col-lg-4">
                <a href="img/html certificado.pdf" target="_blank"><img src="img/css.png" width="120" height="115" class="imagemdireita"></a>             
               </div>
              </div>  
            </div>
          </div>
          </div>
        </section>
    </body>
    
    <footer class="footer">
      <p>fale conosco</p>
      <ul class="contatos">
        <li>
          <a href="#whatsapp" target="_blank">WhatsApp</a>
        </li>
        <li>
          <a href="#" target="_blank">GitHub</a>
        </li>
      </ul>
    </footer>


</html>

CSS:
body{
font: 20px Arial, sans-serif;
}

.navbar{
background-color: rgb(66, 66, 82);
padding-left: 10px;
}

.quemeusou{
background-color: rgb(3, 75, 97);
color: white;
background-repeat: no-repeat;
background-size: cover;
background-position: 0px;
padding-left: 300px;
padding-bottom: 10cm;
position: static;
padding-top: 40px;
opacity: 100%;
}

.padding{
padding-top: 200px;
margin: auto;
}

.footer{
font-size: small;
padding-top: 120px;
padding-left: 5px;
}

.conteudo1{
width: 200px;
height: 40px;
color: rgb(255, 255, 255);
background-color: rgb(0, 255, 13);
background-repeat: no-repeat;
background-size:auto;
border-radius: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.texto{
padding-left: 200px;
}

.margin{
margin-top: 0px;
padding-left: 10px;
}

.Certificados{
background-color: rgb(66, 129, 138);
height: 41px;
width: 100%;
}

.row{
background-color: rgb(78, 129, 138);
}

.imagemmeio{
padding-bottom: 0px;
padding-top: 0px;
}

.waves{
position: absolute;
padding-top: 21mm;
bottom: auto;
left: 0;
right: 0;
}

.wave1{
animation: movewaves1 3s ease-in-out infinite alternate;
}

@Keyframes movewaves1 {
from {
transform: translateX(-2000px);
}

}

.wave2{
animation: movewaves2 3s 1.2s ease-in-out infinite alternate;
}

@Keyframes movewaves2 {
from {
transform: translateX(-1800px);
}

}

.wave3{
animation: movewaves3 3s ease-in-out infinite alternate;
}

@Keyframes movewaves3 {
from {
transform: translateX(-1600px);
}

}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Alguém me ajuda com o Getwaves #2159

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Alguém me ajuda com o Getwaves #2159

Uh oh!

Squ3let0n Sep 17, 2021

Replies: 0 comments

Squ3let0n
Sep 17, 2021