Adicionar um plano de fundo animado ao seu site ou aplicativo pode contribuir para um design único e interessante. Planos de fundo criativos podem invocar emoção e melhorar a experiência do usuário.
Há muitas maneiras de criar um plano de fundo animado para seu aplicativo, mas uma combinação simples de HTML e CSS simples funciona particularmente bem. Confira este exemplo, aprenda como seu código funciona e veja uma demonstração ao vivo do plano de fundo animado final.
Crie a estrutura HTML
Você criará um fundo azul com bolhas que crescem e flutuam para cima. Você pode ver o resultado final neste Codepen.
Comece criando um seção com a turma embrulho para abrigar a animação.
Em seguida, crie 10 divs que representarão as bolhas. Dentro de cada div, crie um span com a classe ponto. Você pode aprender essas tags HTML essenciais em 10 minutos se for novo em HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Estilo com código CSS
Você pode criar efeitos de fundo incríveis usando apenas HTML. Mas para este projeto, você usará CSS para estilizar e animar o plano de fundo.
Primeiro, defina a margem e o preenchimento como 0 para garantir que não haja espaços ao redor do plano de fundo.
* {
margin: 0;
padding: 0;
}
Em seguida, estilize a seção pai usando a classe wrapper. Esta seção terá 100% de largura e altura para preencher toda a página. Defina sua cor de fundo como um tom de azul e dê a ela uma posição absoluta.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Estilize o H1 com uma posição absoluta também. Para colocá-lo no centro da página, comece definindo sua posição superior esquerda para 50%. Em seguida, use a tradução para movê-lo para cima e para a esquerda, de forma que seu centro fique exatamente no meio.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
Em seguida, estilize os divs que serão circulares para funcionarem como bolhas animadas. Dê a cada div uma altura, largura e borda. O grande raio da borda garante que a borda seja um círculo. Além disso, defina uma duração de animação usando a propriedade de animação CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Estilize os pontos com altura e largura de 5px. Dê aos pontos um raio de borda e um fundo branco. Posicione cada um de forma absoluta, próximo ao canto superior direito de seu div pai.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Em seguida, use o seletor enésimo filho para posicionar cada div com configurações diferentes. Você pode nomear a animação animar; você o definirá mais tarde usando @keyframes.
Usar n-ésimo filho(2) para abordar o primeiro divisão desde o primeiro filho do .embrulho elemento é o h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Você pode atribuir porcentagens mais altas aos divs inferiores para que eles subam ao topo em intervalos diferentes.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Use @keyframes para alterar e girar gradualmente os círculos e pontos em intervalos diferentes. No código a seguir, os pontos giram 70 graus e os círculos 360. Essa rotação cria o efeito de bolha.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Você pode tornar os planos de fundo mais elegantes usando padrões CSS. Os padrões permitem criar ondas, grades, folhas e outros padrões para ajudá-lo a criar animações incríveis.
Você pode animar muitas propriedades usando CSS
Você pode criar diferentes tipos de animações usando CSS. Isso inclui alterar a cor de fundo e atrasar o tempo de execução de uma animação.
Você também pode definir a frequência com que uma animação deve ser executada, até o infinito. Você também pode definir a direção em que a animação deve se mover: para frente ou para trás. É divertido brincar com animações e você pode usá-las para dar vida aos seus aplicativos.