Добавянето на анимиран фон към вашия уебсайт или приложение може да допринесе за уникален, интересен дизайн. Творческите фонове могат да предизвикат емоция и да подобрят потребителското изживяване.
Има много начини да създадете анимиран фон за вашето приложение, но проста комбинация от обикновен HTML и CSS работи особено добре. Вижте този пример, научете как работи кодът му и вижте демонстрация на живо на крайния анимиран фон.
Съдържание
Създайте HTML структурата
Ще създадете син цветен фон с мехурчета, които растат и се носят нагоре. Можете да видите крайния резултат на това Codepen.
Започнете, като създадете раздел с обвивката на класа, за да поберете анимацията.
След това създайте 10 div, които ще представляват балончетата. Вътре във всеки div създайте span с точката на класа. Можете да научите тези основни HTML тагове за 10 минути, ако не сте запознати с HTML.
<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>
Стил с CSS код
Можете да създавате невероятни фонови ефекти, като използвате само HTML. Но за този проект ще използвате CSS за стилизиране и анимиране на фона.
Първо задайте полето и подложката на 0, за да гарантирате, че няма интервали около фона.
* {
margin: 0;
padding: 0;
}
След това стилизирайте родителския раздел с помощта на класа обвивка. Този раздел ще има 100% ширина и височина, за да запълни цялата страница. Задайте цвета на фона му като нюанс на синьото и му дайте абсолютна позиция.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Оформете H1 и с абсолютна позиция. За да го поставите в центъра на страницата, започнете, като зададете горната му лява позиция на 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;
}
След това стилизирайте divs, които ще бъдат кръгли, за да действат като анимирани балончета. Дайте на всеки div височина, ширина и рамка. Големият радиус на границата гарантира, че границата е кръг. Освен това задайте продължителност на анимацията, като използвате свойството CSS animation.
.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;
}
Оформете точките с 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 с различни настройки. Можете да кръстите анимацията animate; ще го дефинирате по-късно с помощта на @keyframes.
Използвайте nth-child(2), за да адресирате първия div, тъй като първият дъщерен елемент на елемента .wrapper е 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;
}
Можете да дадете на по-ниските divs по-високи проценти, така че да се издигат до върха на различни интервали.
.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;
}
Използвайте @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. Те включват промяна на цвета на фона и забавяне на времето за изпълнение на анимация.
Можете също да зададете колко често да се изпълнява анимация, дори до безкрайност. Можете също да зададете посоката, в която анимацията трябва да се движи: напред или назад. Забавно е да си играете с анимации и можете да ги използвате, за да оживите вашите приложения.