" background animation css - Bootstrap animation"
Bootstrap 3.3.0 Snippet by creativealex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="home-product">
by <a style="color:#fff;" href="http://phpcooker.com" target="_blank">PHP Cooker</a>
<div class="col-md-6 col-sm-6">
<div class="home-product-hedaing right-product">
<h1>Download Bootstrap date picker</h1>
</div>
<a href="http://phpcooker.com/datepicker-in-bootstrap" target="_blank"><img alt="" class="img-responsive" src="http://phpcooker.com/upload/bootstrap-datepicker.PNG"></a>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body{margin:0px; padding:0px;}
@-webkit-keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
@keyframes backgroundScroll {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}
.home-product {
background:url("http://lorempixel.com/1300/500/");
float: left;
padding: 100px 0;
width: 100%;
color:#fff !important;
min-height:641px;
-webkit-animation: backgroundScroll 35s linear infinite;
animation: backgroundScroll 10s linear infinite;
background-size:130% 100%;
background-position:top;
background-attachment:fixed;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: