Henrique: junho 2024

05/06/2024

Bateria Carregando em HTML

Código em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bateria</title>
    <link href="" rel="" integrity="" crossorigin="">
</head>
<style>
  .battery-top {
    width: 30px;
    height: 10px;
    background: black;
    margin: 0 auto;
    border: 3px solid silver;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
  }
  .battery-content {
    width: 150px;
    height: 250px;
    background: black;
    position: relative;
    margin: 0 auto;
    border: 3px solid silver;
    border-radius: 18px;
  }
  .charge {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 14px;
    animation: battery 8s linear infinite;
  }
  @keyframes battery {
    0% {
      height: 0%;
      background: red;
    }
    25% {
      height: 25%;
      background: orange;
    }
    50% {
      height: 50%;
      background: rgb(7, 195, 241);
    }
    75% {
      height: 75%;
      background: blue;
    }
    100%{
      height: 100%;
      background: rgb(0, 255, 0);
    }
  }
</style>
<body>
  <div class="main">
    <div class="battery-top"></div>
    <div class="battery-content">
    <div class="charge"></div>
  </div>
</body>
</html>

02/06/2024

Animação com Hélice rotacional em HTML

Código feito em HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

img{
    border: 20px solid aqua;
    padding: 50px;
    border-radius: 50%;
    animation: fananim linear infinite;
}

button{
    cursor: pointer;
    width: 100px;
    height: 100px;
    padding: 20px 30px;
    margin: 0 20px;
    font-size: 25px;
    font-weight: 550;
    border: none;
    background-color: silver;
    border-radius: 50%;
    transition: 0.1s;
}

button:active{
    box-shadow: 0px 10px 10px black;
    transform: scale(0.95);
}

.main button:nth-last-child(5){
    background-color: rgb(0, 255, 0);
}

.main button:nth-last-child(4){
    background-color: red;
}
@keyframes fananim {
    100%
    {
        transform: rotate(360deg);
    }
}
</style>
<body>
  <div>
    <img id="img" src="Fan.png" alt="" srcset="">
    <button onclick="myfunon()">ON</button>
    <button onclick="myfunoff()">OFF</button>
    <button onclick="myfun1()">1</button>
    <button onclick="myfun2()">2</button>
    <button onclick="myfun3()">3</button>
  </div>  
  
</body>
  <script>
    let a=document.getElementById("img");
    function myfunon() 
    {a.style.animationDuration = 3+"s";}
    function myfunoff() 
    {a.style.animationDuration=0+"s";}
    function myfun1() 
    {a.style.animationDuration=1+"s";}
    function myfun2() 
    {a.style.animationDuration=0.5+"s";}
    function myfun3() 
    {a.style.animationDuration=0.1+"s";}
  </script>
</html>

Palavras chave:

Animation with Rotational Helix in HTML

Animación con Hélice Rotacional en HTML

Animasi karo Rotational Helix ing HTML

Animasjon med Rotational Helix i HTML

HTMLдеги Rotational Helix менен анимация

Анимация с использованием вращающейся спирали в HTML

אנימציה עם Rotational Helix ב-HTML

Animation leh Helix Rotational oo HTML ah

HTML의 회전 나선을 사용한 애니메이션

Pesquisar neste blog

05/06/2024

Bateria Carregando em HTML

02/06/2024

Animação com Hélice rotacional em HTML

Total de visualizações de página

Marcadores

Translate