Background Animation Sliders Without jquery
In this Post We Will Explain About is Background Animation Sliders Without jquery With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to how to make background image slideshow in htmlExample
In this post we will show you Best way to implement background image slideshow using CSS, hear for html code for background image slideshowwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
index.html
First of all create a simple index.html file and the simple html code to write div and any id to applay CSS.it’s CSS to create a dynemically simple Background Animation Sliders Without jquery.and then copy this url and get this images to add your application images folder “http://massage.com.my/images/alllogo.png”.
<body> <div id="live-slides-demo"></div> </body>
style.css
<style>
body {
margin:0;
padding:0;
}
div#live-slides-demo {
background-image: url('http://massage.com.my/images/alllogo.png');
-webkit-animation: slidebgloop 80s linear infinite;
-moz-animation: slidebgloop 80s linear infinite;
-o-animation: slidebgloop 80s linear infinite;
animation: slidebgloop 80s linear infinite;
background-size: cover;
background-size: cover;
height: 100%;
position: relative;
}
@-webkit-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@-moz-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@-o-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
</style>
Full Example of Background Animation Sliders
<html>
<head>
<style>
body {
margin:0;
padding:0;
}
div#live-slides-demo {
background-image: url('http://massage.com.my/images/alllogo.png');
-webkit-animation: slidebgloop 80s linear infinite;
-moz-animation: slidebgloop 80s linear infinite;
-o-animation: slidebgloop 80s linear infinite;
animation: slidebgloop 80s linear infinite;
background-size: cover;
background-size: cover;
height: 100%;
position: relative;
}
@-webkit-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@-moz-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@-o-keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
@keyframes slidebgloop {
from {
background-position: 4000px;
}
to {
background-position: 0px;
}
}
</style>
</head>
<body>
<div id="live-slides-demo"></div>
</body>
</html>
I hope you have Got What is Make a Background Image Slider With CSS Keyframes And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.
pakainfo is the most popular Programming & Web Development blog.Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.