5.1 Mudança de cor
CSS-transitions permitem animar mudanças nas propriedades dos elementos, criando efeitos visuais suaves. Agora vamos ver como usar transições para mudar cor, tamanho e posição dos elementos, além de demonstrar exemplos práticos.
Mudar a cor de um elemento usando CSS-transitions é uma das aplicações mais comuns. Isso pode incluir a alteração da cor do texto, fundo ou bordas do elemento.
Exemplo 1: Mudança de cor de fundo
Este exemplo demonstra como mudar a cor de fundo de um elemento quando o cursor passa por cima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mudar Cor de Fundo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho fixo e cor de fundo.box:hover: quando o cursor está sobre o elemento, a cor de fundo muda suavemente de azul para verde em 1 segundo com função de tempo ease
Exemplo 2: Mudança de cor do texto
Este exemplo demonstra como mudar a cor do texto de um elemento quando o cursor passa por cima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mudança de Cor do Texto</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Passe o mouse aqui!</div>
</body>
</html>
Explicação do código:
.text: elemento com cor inicial do texto.text:hover: quando o cursor está sobre o elemento, a cor do texto muda suavemente de vermelho para roxo em 0.5 segundos com função de tempo linear
5.2 Mudança de tamanho
Alterar o tamanho dos elementos com CSS-transitions pode incluir a mudança da largura, altura ou ambos ao mesmo tempo.
Exemplo 1: Mudança de largura
Este exemplo demonstra como mudar a largura de um elemento quando o cursor passa por cima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mudança de Largura</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com largura inicial de 100 pixels-
.box:hover: quando o cursor está sobre o elemento, a largura aumenta suavemente para 200 pixels em 2 segundos com a função de tempoease-in-out
Exemplo 2: Mudança de altura
Este exemplo demonstra como mudar a altura de um elemento quando o cursor passa por cima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mudança de Altura</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explicação do código:
.box: elemento com altura inicial de 100 pixels.box:hover: quando o cursor está sobre o elemento, a altura aumenta suavemente para 200 pixels em 1.5 segundos com função de tempoease
5.3 Mudança de posição
Alterar a posição dos elementos com CSS-transitions pode incluir mover o elemento usando as propriedades
top, right, bottom, left ou transformações translate.
Exemplo 1: Movimento usando left
Este exemplo demonstra como mover o elemento para a direita quando o cursor passa por cima usando a propriedade left:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movimento do Elemento</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com posição inicialleft: 0.box:hover: quando o cursor está sobre o elemento, ele se move suavemente para a direita em 100 pixels em 2 segundos
Exemplo 2: Movimento usando transform: translate
Este exemplo demonstra como mover o elemento para a direita e para baixo quando o cursor passa por cima usando a transformação translate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movimento com transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explicação do código:
.box: elemento com transformação inicialtranslate(0, 0).box:hover: quando o cursor está sobre o elemento, ele se move suavemente para a direita em 100 pixels e para baixo em 50 pixels em 1 segundo
GO TO FULL VERSION