Тази проста демонстрация обяснява как да използвате CSS анимации за интересни визуални ефекти.
Добавянето на анимиран фон към вашия уебсайт или приложение може да допринесе за уникален, интересен дизайн. Творческите фонове могат да предизвикат емоция и да подобрят потребителското изживяване.
Има много начини да създадете анимиран фон за вашето приложение, но проста комбинация от обикновен HTML и CSS работи особено добре. Вижте този пример, научете как работи кодът му и вижте демонстрация на живо на крайния анимиран фон.
Създайте HTML структурата
Ще създадете син цветен фон с мехурчета, които растат и се носят нагоре. Можете да видите крайния резултат на това Codepen.
Започнете със създаване на a раздел с класа обвивка за настаняване на анимацията.
След това създайте 10 div, които ще представляват балончетата. Вътре във всеки div създайте span с класа точка. Можеш научете тези основни HTML тагове за 10 минути ако сте нов в HTML.
<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>Стил с CSS код
Можете да създадете невероятно фонови ефекти, използвайки само HTML. Но за този проект ще използвате CSS за стилизиране и анимиране на фона.
Първо задайте полето и подложката на 0, за да гарантирате, че няма интервали около фона.
* {
margin: 0;
padding: 0;
}След това стилизирайте родителския раздел с помощта на класа обвивка. Този раздел ще има 100% ширина и височина, за да запълни цялата страница. Задайте цвета на фона му като нюанс на синьото и му дайте абсолютна позиция.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Оформете H1 и с абсолютна позиция. За да го поставите в центъра на страницата, започнете, като зададете горната му лява позиция на 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;
}След това стилизирайте divs, които ще бъдат кръгли, за да действат като анимирани балончета. Дайте на всеки div височина, ширина и рамка. Големият радиус на границата гарантира, че границата е кръг. Освен това задайте продължителност на анимацията, като използвате свойството CSS animation.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Оформете точките с 5px височина и ширина. Дайте на точките радиус на границата и бял фон. Позиционирайте всеки един абсолютно, близо до горния десен ъгъл на неговия родител div.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}След това използвайте селектора nth-child, за да позиционирате всеки div с различни настройки. Можете да дадете име на анимацията оживявам; ще го дефинирате по-късно с помощта на @keyframes.
Използвайте n-то дете (2) за справяне с първото див от първото дете на .обвивка елементът е 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;
}
Можете да дадете на по-ниските divs по-високи проценти, така че да се издигат до върха на различни интервали.
.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;
}
Използвайте @keyframes, за да променяте постепенно и завъртате кръговете и точките на различни интервали. В следния код точките се въртят на 70 градуса, а кръговете на 360. Това завъртане създава ефекта на балон.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Можеш направете фоновете по-стилни с помощта на CSS модели. Моделите ви позволяват да създавате вълни, решетки, листа и други модели, които да ви помогнат да създавате невероятни анимации.
Можете да анимирате много свойства с помощта на CSS
Можете да създавате различни видове анимации с помощта на CSS. Те включват промяна на цвета на фона и забавяне на времето за изпълнение на анимация.
Можете също да зададете колко често да се изпълнява анимация, дори до безкрайност. Можете също да зададете посоката, в която анимацията трябва да се движи: напред или назад. Забавно е да си играете с анимации и можете да ги използвате, за да оживите вашите приложения.