Animação de Borda usando CSS
A animação é uma parte vital no design moderno de páginas da web, permitindo aos desenvolvedores criar experiências visuais envolventes e dinâmicas para os usuários. Uma técnica popular e criativa é a animação de borda usando CSS, que pode adicionar um toque único e atraente aos elementos em uma página. Neste tutorial, vamos explorar e descrever em detalhes o código fornecido, que cria uma animação de borda intrigante, e como ele pode ser usado em um site, como o Code Kong.
Entendendo o Código
O código HTML e CSS fornecido demonstra a criação de uma animação de borda usando a propriedade repeating-conic-gradient juntamente com animações CSS. Vamos dividir o código em partes e explicar cada uma delas.
HTML Estrutura Básica
<!DOCTYPE html>
<html lang="ptbr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" >
<title>animação de borda usando CSS</title>
</head>
<body>
<div class="box"></div>
</body>
</html>O código HTML fornece uma estrutura básica para a página. Ele inclui uma única div com a classe box, que é onde a animação de borda será aplicada.
Estilos CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vw;
background: #25252b;
}
.box{
position: relative;
width: 400px ;
height: 400px ;
background: repeating-conic-gradient(from var(--a),#ff2770 0%, #ff2770 5%, transparent 5%, transparent 40%, #ff2770 50% );
animation: animar 4s linear infinite;
border-radius: 20px;
}
@property --a{
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes animar{
0%{
--a: 0deg;
}
100%{
--a: 360deg;
}
}
.box::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: repeating-conic-gradient(from var(--a),#45f3ff 0%, #45f3ff 5%, transparent 5%, transparent 40%, #45f3ff 50% );
animation: animar 4s linear infinite;
animation-delay: -1s;
border-radius: 20px;
}
.box::after{
content: '';
position: absolute;
inset: 8px;
background: #2d2d39;
border-radius: 15px;
border: solid 8px #25252b;
}Os estilos CSS definem a aparência e a animação da div com a classe box e seus elementos associados.
*é um seletor universal que redefine a margem, preenchimento e caixa de modelagem para todos os elementos, evitando problemas de layout indesejados.
- O estilo
bodyalinha o conteúdo ao centro vertical e horizontal da página, definindo um fundo de cor escura (#25252b).
- A classe
.boxé a área onde a animação de borda é aplicada. Ela possui um gradiente cônico repetido como plano de fundo, criando um efeito de animação. A propriedadeanimationaplica a animação definida por@keyframes animar.
@property --adefine uma variável de propriedade CSS chamada--aque será usada para controlar o ângulo do gradiente cônico. A propriedadesyntaxespecifica que a variável aceitará um valor de ângulo.
@keyframes animardefine uma animação que altera gradualmente o valor da variável--ade 0deg a 360deg. Isso faz com que o gradiente cônico gire, criando um efeito de animação.
.box::beforecria um pseudo-elemento antes da.box, com um gradiente cônico semelhante, mas em uma cor diferente. Isso cria um efeito de camadas na animação.
.box::aftercria um pseudo-elemento após a.box, que cria uma moldura escura ao redor da animação, dando um visual mais polido.
Conclusão
A animação de borda usando CSS é uma técnica criativa para adicionar dinamismo e interatividade às páginas da web. O código fornecido demonstra como criar uma animação de gradiente cônico rotativo usando variáveis CSS e animações @keyframes.
Essa técnica pode ser facilmente integrada a um site, como o Code Kong, para criar um toque especial nas páginas e atrair a atenção dos usuários. Ao personalizar as cores, tamanhos e estilos, você pode adaptar essa animação para se adequar à identidade visual do seu site e criar uma experiência única para os visitantes.
