Hello friends..
How are you friends? I think you all are very well. today i'll show you very interesting programming
using CSS3 with Hover effect..
Just copy the given code & save with .html and open it with any browser....
code
<html>
<head>
<style>
.box
{
width:200px;
height:200px;
margin:100px;
box-shadow:0px 0px 10px 10px #666666;
background-color:#F00;
-webkit-transition:width 8s, height 8s, background-color 8s, -webkit-transform 8s;
-moz-transition:width 8s, height 8s, background-color 8s, -moz-transform 8s;
-op-transition:width 8s, height 8s, background-color 8s, -op-transform 8s;
}
.box:hover
{
-webkit-transform:rotate(5000deg);
-moz-transform:rotate(5000deg);
-op-transform:rotate(5000deg);
background-color:#0F0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
code
<html>
<head>
<style>
.box
{
width:200px;
height:200px;
margin:100px;
box-shadow:0px 0px 10px 10px #666666;
background-color:#F00;
-webkit-transition:width 8s, height 8s, background-color 8s, -webkit-transform 8s;
-moz-transition:width 8s, height 8s, background-color 8s, -moz-transform 8s;
-op-transition:width 8s, height 8s, background-color 8s, -op-transform 8s;
}
.box:hover
{
-webkit-transform:rotate(5000deg);
-moz-transform:rotate(5000deg);
-op-transform:rotate(5000deg);
background-color:#0F0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Thank you !!!
No comments:
Post a Comment