Hi Friends...
In this Article we learn how to make CSS 3 Animation using mouse over , copy that code and make your own Animation
In this Article we learn how to make CSS 3 Animation using mouse over , copy that code and make your own Animation
Your Code is as under
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">.container{
width: 300px;
height:300px;
margin: 0 auto;
position:relative;
overflow:hidden;
}
.planet{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(http://4.bp.blogspot.com/- rWU2czr6S0Q/VivJ_UMx7sI/AAAAAAAAAhg/AeOXq3s7TjM/s1600-r/finalc%2523logoPNGupdated.png) no-repeat center center;
}
.rocket{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ICuczM6_YMiHC4avhLFebhlq7olMZWJQol2dY1TNNfP3uMt5STD-vddgFg_D0Oqlpb-mOFoCS8CDEq_ABq5pIsdHDUZxM1SbiKebxPTENidFcDum_HuwDUdGCBWvMM6jgO9MR7R4gXow/s320/rocket.png) no-repeat 4px center;
/* Chrome still requires the -webkit- prefix */
-webkit-animation:orbit 2s linear infinite;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{
background-position:80px center;
}
/* Define the keyframes of the animation */
@-webkit-keyframes orbit {
from {
-webkit-transform:rotate(0deg);}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes orbit {
from {
transform:rotate(0deg);
/* I am including the -webkit-transform properties, because
Chrome might start supporting keyframe without prefix in the future,
but we can't be certain whether it will support prefix-free transform
at the same time */
-webkit-transform:rotate(0deg);}
to {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<div class="planet"></div>
<div class="rocket"></div>
</div>
</div>
</form>
</body>
</html>
Thank You !
0 comments:
Post a Comment