Hello World Animando:
Aprenda a criar uma animação divertida e interativa de "Hello World" com este tutorial passo a passo.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 3 linguagens: HTML, CSS e JavaScript.
Este é um projeto onde tem um "Hello World" Animando, e também um botão Animando, que quando clicado muda de cor.
4° Passo: Testar o Projeto!
Veja o projeto Hello World Animando em funcionamento neste link. Hello World Animando.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 800px)" href="altura-max800.css">
<title>Hello World Animando</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<div class="m">
<p>Hello 😁 </p>
</div>
<br>
<button onclick="here()">Mudar Cor</button>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
h1 {
font-family: Arial, Helvetica, sans-serif;
}
div {
height: 130px;
width: 130px;
background: linear-gradient(20deg, red, yellow, orange);
border-radius: 35px;
display: flex;
align-items: center;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div p {
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
position: relative;
left: 30px;
}
.m {
background: linear-gradient(
20deg,
rgb(0, 110, 255),
rgb(4, 0, 255),
rgb(45, 0, 128)
);
transition: 1s;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(to right, rgb(135, 170, 235), blue);
}
button {
height: 30px;
border-radius: 15px;
background-color: transparent;
border: solid 1px rgb(76, 119, 175);
transition: 1s;
}
button:hover {
box-shadow: 0px 8px 8px black;
transform: translateY(-7px);
transition: 1s;
}
button:active {
transform: translateY(3px);
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function here() {
let a = document.querySelector(
"div");
a.classList.toggle("m");
}
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Comentários
Postar um comentário
Obrigado pelo seu feedback!