Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

четвъртък

Дизайн. Анимиран фон на страница

Анимиран се фон на страница
Здравейте, приятели. За всяка отделна страница на вашия блог, било то статична или на публикация, можете лесно да направите анимиран фон. Непрекъснато променящ се, с определен интервал между изображенията, създаващ красив ефект.
Предстоят празници и защо да не оформите чрез този ефект поздравления към вашите читатели. Blogzablogove вече има публикации, засягащи тази възможност. Ако сте пропуснали, прочетете как да промените автоматично цвета на фона в Blogger и как да променим фона на страница в блог. Но защо да не разгледаме и възможността за анимиран фон на отделна страница, заслужава си.

Анимираният фон

Това, което споделям днес може да се види тук.
Кодът е напълно готов и не зависи от никакви специални умения, за да го редактирате. От вас се изисква да подготвите предварително необходимите изображения, които ще създават анимирания фон. Кодът е създаден за шест изображения, които се сменят едно след друго.

Оригинален код


<style>

ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(Адрес изображение 1);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(Адрес изображение 2);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(Адрес изображение 3);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(Адрес изображение 4);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(Адрес изображение 5);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(Адрес изображение 6);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>

<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>


➤В синьо отбелязах местата в кода, където трябва да вмъкнете адресите на вашите изображения;

➤Височината и ширината са настроени на 100%;

➤Сега просто напишете публикацията си по обичайния начин;

➤След това в HTML режим поставете напълно готовия код;

➤По-добре е да подберете изображения с такъв фон, че текстът да е добре видим и по-контрастен;

➤Публикувайте и се възхищавайте на анимирания фон;

Редактиран код


<style>

ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(
https://img5.badfon.ru/original/1366x768/9/d5/metla-lepestki-fon.jpg);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(
https://img1.badfon.ru/original/1366x768/8/af/cvetok-shipovnik-rozovyy.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(
https://img1.badfon.ru/original/1366x768/8/ae/cvety-tyulpany-pasha-yayca-261.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(
https://img3.badfon.ru/original/1366x768/e/9c/nevesta-buket-rozy-perchatki.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(
https://img1.badfon.ru/original/1366x768/2/7a/gortenziya-eustoma-buket.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(
https://img5.badfon.ru/original/1366x768/d/26/petreya-makro-socvetie-lepestki.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>

<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>


Можете просто и лесно да промените фона на дадена страница, ако имате желание,
Очаквам  вашите коментари и ще се видим скоро, надявам се.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

BGtop

Няма коментари:

Публикуване на коментар