Animowany gradientowy kontener z tekstem
W dzisiejszym poradniku pokażę, jak stworzyć ciekawy efekt ruchomego tła oraz obramowania kontenera za pomocą HTML i styli CSS.
Dodamy div z tekstem, w którym tło oraz obramowanie będzie składało się z dwóch kolorów, które płynnie przejdą w gradient, zmieniając się miejscami. Uzyskamy efekt delikatnego pulsowania, podobnego do animacji.
Dodajemy kod html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animowany gradientowy kontener z tekstem</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="box"><span><h1>Animowany gradientowy div z tekstem</h1> To jest div z tłem gradient i obramowaniem. Kolory są ruchome i gładko przechodzą w inny kolor.</span>
</div>
</body>
</html>
W nagłówku w <head> dodałam jeszcze kod do google fonts, by napisy były atrakcyjniejsze oraz dołączyłam zewnętrzny plik styli css.
W <body> jest kod diva o klasie „box”.
Dodajemy style do pliku style.css
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Poppins", sans-serif;
}
.box {
width: 700px;
height: 650px;
position: relative;
font-size: 30px;
line-height: 40px;
font-weight: 300;
border: 8px solid transparent; /* Ustawienie przezroczystego obramowania */
background-image: linear-gradient(45deg, #ffcc00, #33ccff); /* Gradient */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.box span{
padding: 50px;
}
h1{
line-height: 57px;
font-size: 50px;
}
/* Animacja przechodzenia koloru obramowania */
@keyframes borderGradient {
0% {
border-color: #ffcc00; /* Początkowy kolor obramowania */
}
100% {
border-color: #33ccff; /* Końcowy kolor obramowania */
}
}
/* Animacja przechodzenia koloru obramowania */
.box {
animation: borderGradient 3s infinite alternate; /* Ustawienie animacji */
}
Kolory, odstępy czy rozmiar czcionki można zmienić na dowolne w pliku style.css.
Tak prezentuje się efekt (animację zobaczycie u siebie jak utworzycie kod, a tutaj prezentuję screeny):
