<!DOCTYPE html>
<html>
<head>
<title>wobble effect</title>
<style>
body {
background-color: tomato;
}
.container {
position: absolute;
top: 40px;
left: 140px;
}
.slices {
position: absolute;
width: 600px;
height: 23px;
background: url
("http://farm3.staticflickr.com/2879/12096787325_ee42f6589d_z.jpg");
animation: wobble 5s infinite ease-in-out alternate;
}
.slice1 {
top: 15px;
background-position: 0 -15px;
animation-delay: 340ms;
}
.slice2 {
top: 30px;
background-position: 0 -30px;
animation-delay: 430ms;
}
.slice3 {
top: 45px;
background-position: 0 -45px;
animation-delay: 520ms;
}
.slice4 {
top: 60px;
background-position: 0 -60px;
animation-delay: 610ms;
}
.slice5 {
top: 75px;
background-position: 0 -75px;
animation-delay: 700ms;
}
.slice6 {
top: 90px;
background-position: 0 -90px;
animation-delay: 790ms;
}
.slice7 {
top: 105px;
background-position: 0 -105px;
animation-delay: 880ms;
}
.slice8 {
top: 120px;
background-position: 0 -120px;
animation-delay: 970ms;
}
.slice9 {
top: 135px;
background-position: 0 -135px;
animation-delay: 1060ms;
}
.slice10 {
top: 150px;
background-position: 0 -150px;
animation-delay: 1150ms;
}
.slice11 {
top: 165px;
background-position: 0 -165px;
animation-delay: 1240ms;
}
.slice12 {
top: 180px;
background-position: 0 -180px;
animation-delay: 1330ms;
}
.slice13 {
top: 195px;
background-position: 0 -195px;
animation-delay: 1420ms;
}
.slice14 {
top: 210px;
background-position: 0 -210px;
animation-delay: 1510ms;
}
.slice15 {
top: 225px;
background-position: 0 -225px;
animation-delay: 1600ms;
}
.slice16 {
top: 240px;
background-position: 0 -240px;
animation-delay: 1690ms;
}
.slice17 {
top: 255px;
background-position: 0 -255px;
animation-delay: 1780ms;
}
.slice18 {
top: 270px;
background-position: 0 -270px;
animation-delay: 1870ms;
}
.slice19 {
top: 285px;
background-position: 0 -285px;
animation-delay: 1960ms;
}
.slice20 {
top: 300px;
background-position: 0 -300px;
animation-delay: 2050ms;
}
.slice21 {
top: 315px;
background-position: 0 -315px;
animation-delay: 2140ms;
}
.slice22 {
top: 330px;
background-position: 0 -330px;
animation-delay: 2230ms;
}
.slice23 {
top: 345px;
background-position: 0 -345px;
animation-delay: 2320ms;
}
.slice24 {
top: 360px;
background-position: 0 -360px;
animation-delay: 2410ms;
}
@keyframes wobble {
25% {
transform: translateY(-8px);
}
50% {
transform: translateY(8px);
}
75% {
transform: translateY(-8px);
}
100% {
transform: translateY(8px);
}
}
</style>
</head>
<body>
<div class='container'>
<div class='slice1 slices'></div>
<div class='slice2 slices'></div>
<div class='slice3 slices'></div>
<div class='slice4 slices'></div>
<div class='slice5 slices'></div>
<div class='slice6 slices'></div>
<div class='slice7 slices'></div>
<div class='slice8 slices'></div>
<div class='slice9 slices'></div>
<div class='slice10 slices'></div>
<div class='slice11 slices'></div>
<div class='slice12 slices'></div>
<div class='slice13 slices'></div>
<div class='slice14 slices'></div>
<div class='slice15 slices'></div>
<div class='slice16 slices'></div>
<div class='slice17 slices'></div>
<div class='slice18 slices'></div>
<div class='slice19 slices'></div>
<div class='slice20 slices'></div>
<div class='slice21 slices'></div>
<div class='slice22 slices'></div>
<div class='slice23 slices'></div>
<div class='slice24 slices'></div>
</div>
</body>
</html>
For such more Blogs kindly visit to http://findnerd.com/NerdDigest/Html
No comments:
Post a Comment