Анимация для сайта CSS
Анимированные элементы все чаще и чаще появляются на страницах сайтов. Они придают красоты и оригинальности любому проекту, поэтому без них уже не обойтись. В данном разделе вы найдете простые анимации для фона сайта.
Анимация вращения на CSS
Анимация вращение может пригодится для некоторых декоративных элементов на сайте, для баннеров и различных эффектов для привлечения внимания. В данном примере показана анимация вращения картинки, но так же это может быть и блок.
Пример
HTML
<div class="animation-bg">
<img class="img-rotation" src="image.png"/>
</div>
CSS
.animation-bg{
display: flex;
justify-content: center;
align-items: center;
background: #042548;
height: 350px;
}
.img-rotation {
width: 200px;
-webkit-animation-name: rotation;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: 15s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation;
-o-animation-duration: 15s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-moz-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@-o-keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
@keyframes rotation {
0% {-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
}
Анимация звездного неба на CSS
Анимация звездного неба иногда требуется для шапки сайта, так же ее можно вставить для отдельных элементов в виджете или фона. Цвет фона и звезды можно установить на свой вкус.
Пример
HTML
<div class="stars">
<div class="stars_1"></div>
<div class="stars_2"></div>
<div class="stars_3"></div>
</div>
CSS
.stars {
position: relative;
overflow: hidden;
height: 350px;
margin-bottom: -350px;
background: #042548;
}
.stars_1, .stars_2, .stars_3{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: url('image1.png');
-webkit-animation: stars 5s linear infinite;
animation: stars 5s linear infinite;
}
.stars_2 {
background-position: 100px 100px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.stars_3 {
background-image: url('image2.png');
background-position: 350px 100px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
@-webkit-keyframes stars {
0%, 50%, 100% {opacity: 0;}
1%, 49% {opacity: 1;}
}
@keyframes stars {
0%, 50%, 100% {opacity: 0;}
5%, 45% {opacity: 1;}
}
Анимация звездопада на CSS
Анимация звездопада может пригодиться для фона сайта, или отдельных элементов, чтобы придать глубины и полноты всему дизайну. Звезды и цвет фона можно изменить на свой вкус.
Пример
HTML
<div class="animation-bg">
<div class="bg-ex-stars"></div>
</div>
CSS
.animation-bg{
display: flex;
justify-content: center;
align-items: center;
background: #042548;
height: 350px;
}
.bg-ex-stars {
background: url('image.png'); /* Путь к картинке */
background-position: 0 0;
background-repeat: repeat;
animation: animated-bg 60s linear infinite;
width: 100%;
height: 350px;
}
@keyframes animated-bg {
from { background-position: 0 0; }
to { background-position: 0 1000px; }
}
Анимация снежинок на CSS
Анимация снежинок прекрасно подойдет в новогоднее время, такой анимацией можно украсить как весь сайт, так и отдельные его элементы. Фон и снежинки можно заменить на такие, которые подойдут для вашего дизайна.
Пример
HTML
<div class="animation-bg">
<div class="bg-ex-snowflake"></div>
</div>
CSS
.animation-bg{
display: flex;
justify-content: center;
align-items: center;
background: #042548;
height: 350px;
}
.bg-ex-snowflake {
background: url('image.png'); /* Путь к картинке */
background-position: 0 0;
background-repeat: repeat;
animation: animated-snowflake 60s linear infinite;
width: 100%;
height: 350px;
}
@keyframes animated-snowflake {
from { background-position: -800px 0; }
to { background-position: 0 800px; }
}
Анимация облаков на CSS
Анимация облаков может пригодиться для шапки сайта, либо для баннера. Анимация на CSS не нагрузит сайт и придаст ему уникальный дизайн. Цвет фона и облака можно заменить на другие.
Пример
HTML
<div class="animation-bg">
<div class="bg-ex-sky"></div>
</div>
CSS
.animation-bg{
display: flex;
justify-content: center;
align-items: center;
background: #042548;
height: 350px;
}
.bg-ex-sky {
background: url('image.png'); /* Путь к картинке */
background-position: 0 0;
background-repeat: repeat;
animation: animated-sky 60s linear infinite;
width: 100%;
height: 350px;
}
@keyframes animated-sky {
from { background-position: 800px 0; }
to { background-position: 0 0; }
}
Фон для сайта с анимацией CSS
Чтобы создать фон для сайта с анимацией нужно подобрать картинку, рисунок которой будет совпадать по всем ее сторонам. Направление движения и скорость можно поменять, и сделать движущиеся горы, дождь, падающие снежинки или звездопад.
Пример
HTML
<div class="bg-ex-animation">Lorem Ipsum</div>
CSS
.bg-ex-animation {
background: url(image.jpg); /* Путь к картинке */
background-position: 0 0;
background-repeat: repeat;
animation: animated-bg 60s linear infinite;
width: 100%;
height: 350px;
}
@keyframes animated-bg {
from { background-position: 0 0; }
to { background-position: 0 1000px; }
}