"animation:wheel:mk22"
Bootstrap 4.1.1 Snippet by Milind_Kamthe

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2 style="text-align:center">Animation by <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2>
<p style="text-align:center">creativemk22@gmail.com</p>
<hr>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="work_area">
<div class="work_object-1"></div>
<div class="work_object-2"></div>
<div class="work_object-3"></div>
<div class="work_object-4"></div>
</div>
</div>
<div class="col-md-4"></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
.work_area{width:100%;float:left;background:#fff;height:200px;border:5px solid #000;box-shadow:0 0 10px #000;position:relative;background-image:url("https://auto.ndtvimg.com/bike-images/big/royal-enfield/thunderbird-500x/royal-enfield-thunderbird-500x.jpg?v=6");background-position:center;background-size:cover;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}
.work_object-1{animation: my_anm1 5s linear infinite;background:rgba(0,0,0,0.8);width:100%;height:50px;position:absolute;left:0;bottom:0;box-shadow:inset 0 0 10px #000;}
.work_object-2{animation: my_anm2 5s linear infinite;background:transparent;width:100%;height:5px;position:absolute;right:0;order-radius:50%;border-top:3px dashed #fff;bottom:9%;}
.work_object-3{animation: my_anm3 5s linear infinite;background:#000;width:80px;height:80px;position:absolute;left:15%;bottom:7%;border-radius:50%;border:10px dashed #ccc;box-shadow:0 0 5px #000,inset 0 0 5px #fff;}
.work_object-4{animation: my_anm4 5s linear infinite;background:#000;width:80px;height:80px;position:absolute;right:13%;bottom:7%;border-radius:50%;border:10px dashed #ccc;box-shadow:0 0 5px #000,inset 0 0 5px #fff;}
@keyframes my_anm{
from{transform:rotate(360deg);}
to{transform:rotate(0deg);}
}
@keyframes my_anm2{
from{transform:translateX(100%)}
to{transform:translateX(-10%)}
}
@keyframes my_anm3{
from{transform:rotate(-360deg)}
to{transform:rotate(360deg)}
}
@keyframes my_anm4{
from{transform:rotate(-360deg)}
to{transform:rotate(360deg)}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: