Додавање анимиране позадине вашој веб локацији или апликацији може допринети јединственом, занимљивом дизајну. Креативне позадине могу изазвати емоције и побољшати корисничко искуство.
Постоји много начина да направите анимирану позадину за вашу апликацију, али једноставна комбинација обичног ХТМЛ-а и ЦСС-а функционише посебно добро. Погледајте овај пример, научите како функционише његов код и погледајте демо уживо коначне анимиране позадине.
Преглед садржаја
Креирајте ХТМЛ структуру
Направићете позадину плаве боје са мехурићима који расту и лебде нагоре. На овоме можете видети крајњи резултат Цодепен.
Почните тако што ћете направити одељак са омотачем класе за смештај анимације.
Затим направите 10 дивова који ће представљати мехуриће. Унутар сваког дива, направите распон са тачком класе. Ове основне ХТМЛ ознаке можете научити за 10 минута ако сте нови у ХТМЛ-у.
<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>
Стил са ЦСС кодом
Можете креирати невероватне ефекте позадине користећи само ХТМЛ. Али за овај пројекат ћете користити ЦСС за стилизовање и анимирање позадине.
Прво, поставите маргину и паддинг на 0 како бисте осигурали да нема размака око позадине.
* {
margin: 0;
padding: 0;
}
Затим стилизујте родитељски одељак користећи класу омотача. Овај одељак ће имати 100% ширину и висину да попуни целу страницу. Поставите његову боју позадине као нијансу плаве и дајте јој апсолутну позицију.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Стилизирајте и Х1 са апсолутном позицијом. Да бисте га поставили у центар странице, почните тако што ћете поставити његову горњу леву позицију на 50%. Затим користите транслате да га померите нагоре и налево, тако да му је центар тачно у средини.
.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;
}
Затим, стилизујте дивове који ће бити кружни да делују као анимирани мехурићи. Дајте сваком диву висину, ширину и ивицу. Велики радијус границе осигурава да је граница круг. Такође, подесите трајање анимације користећи својство ЦСС анимације.
.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;
}
Стилизирајте тачке висином и ширином од 5 пиксела. Дајте тачкама радијус ивице и белу позадину. Поставите сваки од њих апсолутно, близу горњег десног дела његовог родитељског дива.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Затим користите селектор нтх-цхилд да бисте позиционирали сваки див са различитим подешавањима. Можете назвати анимацију анимираним; касније ћете га дефинисати помоћу @кеифрамес.
Користите нтх-цхилд(2) да адресирате први див пошто је прво дете елемента .враппер х1.
.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;
}
Нижим дивовима можете дати веће проценте тако да се у различитим интервалима пењу на врх.
.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;
}
Користите @кеифрамес да постепено мењате и ротирате кругове и тачке у различитим интервалима. У следећем коду, тачке се ротирају за 70 степени, а кругови за 360. Ова ротација ствара ефекат мехурића.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Можете учинити позадину модернијом користећи ЦСС обрасце. Обрасци вам омогућавају да креирате таласе, мреже, листове и друге обрасце који ће вам помоћи да креирате невероватне анимације.
Можете анимирати многа својства користећи ЦСС
Можете креирати различите врсте анимација користећи ЦСС. То укључује промену боје позадине и одлагање времена извођења анимације.
Такође можете да подесите колико често анимација треба да се покреће, чак и до бесконачности. Такође можете подесити правац у коме анимација треба да се креће: унапред или уназад. Забавно је играти се са анимацијама и можете их користити да оживите своје апликације.