Webleb - Snippets de Código -

2455 angrybird76

Abrir no Editor Video Publique Seu Código

Recomendado

23 October 2025

Ocultar div, iniciar animação ao clicar no botão

16 October 2025

Exemplo de animação de carregamento CSS

HTML

CSS

/    body {
  font-family: Arial, sans-serif;
  background-color: #0692a5;
  padding: 5rem;
}

main {
  width: 50%;
  margin: 0 auto;
  background-color: #bb4b00;
  padding: 5rem;
  border-radius: 5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 0.25rem;
  border: 3px solid #22e9ce;
  margin-bottom: 1rem;
}

button {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.2rem;
  background-color: #4caf50;
  color: #fcf7f7;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.flower {
    position: relative;
    width: 150px;
    height: 150px;
}

.petal {
    position: absolute;
    width: 80px;
    height: 150px;
    background-color: #FFD700;
    border-radius: 50%;
    left: 20%;
}

.petal:nth-child(1) {
    transform: rotate(45deg);
}

.petal:nth-child(2) {
    transform: rotate(135deg);
}

.petal:nth-child(3) {
    transform: rotate(225deg);
}

.petal:nth-child(4) {
    transform: rotate(315deg);
}

.center {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #FF69B4;
    border-radius: 50%;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
}
* Replace with your CSS Code 
(Leave empty if not needed) */

Recomendado

Ocultar div, iniciar animação ao clicar no botão

Exemplo de animação de carregamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS