Copy and Paste the Code in .aspx Page :
Demo :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="css.aspx.cs" Inherits="NewFolder1_css" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<title>Spinning Image Css</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" Height="39px" ImageUrl="~/Logo1.png"
Width="322px" />
<br />
</div>
Spinning Image :</p>
<p id="socialicons">
<a href="http://sarojasp.blogspot.in/">
<img border="0" src="../rss.png" /></a>
<a href="https://www.facebook.com/pages/Sarojasp/571721979563187">
<img border="0" src="../facebook.png" /></a>
<a href="https://twitter.com/">
<img border="0" src="../twitter.png" /></a>
<a href="http://sarojasp.blogspot.in/">
<img border="0" src="../social_google_button_blue.png" width="60" /></a>
</p>
<p >
</p>
<asp:Image ID="Image2" runat="server" ImageUrl="~/dotnet5.png"
Height="57px" />
</div>
</form>
</body>
</html>
Very Good tutorial ...........Keep it up......
ReplyDelete