To proste demo wyjaśnia, jak używać animacji CSS w celu uzyskania ciekawych efektów wizualnych.

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.

Utwórz strukturę HTML

Stworzysz 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 Sekcja z klasą obwoluta do przechowywania animacji.

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 klasą kropka. Możesz naucz się tych podstawowych tagów HTML w 10 minut jeśli dopiero zaczynasz przygodę z HTML.

<body>
<sectionclass="wrapper">





instagram viewer



<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>

Styl z kodem CSS

Możesz stworzyć coś niesamowitego efekty tła przy użyciu 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.

.wrapperh1 {
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.

.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}

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ę animować; zdefiniujesz to później, używając @keyframes.

Używać n-te dziecko (2) zająć się tym pierwszym div od pierwszego dziecka .obwoluta elementem jest h1.

.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}
.wrapperdiv:nth-child(3) { 
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(4) { 
top: 40%;
left: 40%; 
animation: animate 3slinearinfinite;
}


.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}

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.

.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}
.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}


.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}


.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}

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 stopni. Ten obrót tworzy efekt bańki.

@keyframes animate {
 0% {
transform: scale(0) translateY(0) rotate(70deg);
 }
 100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
 }
}

Możesz spraw, aby tła były bardziej stylowe, 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.