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