Dodanie animowanego tła do Twojej witryny lub aplikacji może przyczynić się do stworzenia unikalnego, ciekawego projektu. Kreatywne tła mogą wywoływać emocje i poprawiać wrażenia użytkownika.
Istnieje wiele sposobów na utworzenie animowanego tła dla aplikacji, ale prosta kombinacja zwykłego HTML i CSS sprawdza się szczególnie dobrze. Sprawdź ten przykład, dowiedz się, jak działa jego kod i obejrzyj na żywo wersję demonstracyjną ostatecznego animowanego tła.
Spis treści:
Utwórz strukturę HTML
Zamierzasz stworzyć niebieskie tło z bąbelkami, które rosną i unoszą się w górę. Efekt końcowy można zobaczyć na tym Koden.
Zacznij od utworzenia sekcji z opakowaniem klasy, w której będzie umieszczona animacja.
Następnie utwórz 10 elementów div, które będą reprezentować bąbelki. Wewnątrz każdego elementu div utwórz zakres z kropką klasy. Jeśli nie masz doświadczenia z HTML, możesz nauczyć się tych podstawowych tagów HTML w 10 minut.
<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>
Styl z kodem CSS
Możesz tworzyć niesamowite efekty tła, używając wyłącznie HTML. Ale w tym projekcie będziesz używać CSS do stylizacji i animacji tła.
Najpierw ustaw margines i dopełnienie na 0, aby upewnić się, że wokół tła nie ma spacji.
* {
margin: 0;
padding: 0;
}
Następnie nadaj styl sekcji nadrzędnej, używając klasy opakowania. Ta sekcja będzie miała 100% szerokości i wysokości, aby wypełnić całą stronę. Ustaw kolor tła jako odcień niebieskiego i nadaj mu pozycję absolutną.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Stylizuj H1 również z absolutną pozycją. Aby umieścić go na środku strony, zacznij od ustawienia jego lewego górnego położenia na 50%. Następnie użyj tłumaczenia, aby przesunąć go w górę i w lewo, tak aby jego środek znalazł się dokładnie na środku.
.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;
}
Następnie nadaj styl elementom div, które będą okrągłe i będą działać jak animowane bąbelki. Nadaj każdemu elementowi div wysokość, szerokość i obramowanie. Duży promień granicy sprawia, że granica ma kształt koła. Ustaw także czas trwania animacji za pomocą właściwości animacji 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;
}
Stylizuj kropki o wysokości i szerokości 5 pikseli. Nadaj kropkom promień obramowania i białe tło. Umieść każdy z nich absolutnie, blisko prawego górnego rogu jego nadrzędnego elementu div.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Następnie użyj selektora nth-child, aby ustawić każdy element div z różnymi ustawieniami. Możesz nazwać animację animowaną; zdefiniujesz to później, używając @keyframes.
Użyj nth-child(2), aby zaadresować pierwszy div, ponieważ pierwszym dzieckiem elementu .wrapper jest 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;
}
Możesz nadać niższym divom wyższe wartości procentowe, tak aby wznosiły się do góry w różnych odstępach czasu.
.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;
}
Użyj @keyframes, aby stopniowo zmieniać i obracać okręgi i kropki w różnych odstępach czasu. W poniższym kodzie kropki obracają się o 70 stopni, a okręgi o 360. Ten obrót tworzy efekt bąbelków.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Możesz uczynić tła bardziej stylowymi, używając wzorców CSS. Wzory umożliwiają tworzenie fal, siatek, liści i innych wzorów, które pomogą Ci stworzyć niesamowite animacje.
Możesz animować wiele właściwości za pomocą CSS
Za pomocą CSS możesz tworzyć różne typy animacji. Należą do nich zmiana koloru tła i opóźnienie czasu wykonania animacji.
Możesz także ustawić częstotliwość uruchamiania animacji, nawet w nieskończoność. Możesz także ustawić kierunek, w którym ma się poruszać animacja: do przodu lub do tyłu. Zabawne jest bawić się animacjami i możesz ich używać do ożywiania swoich aplikacji.