<!DOCTYPE html>
<html >
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divTitle").addClass("style1");
var flag=true;
function blinkstyle(){
if(flag==true)
{
if($("#divTitle").hasClass("style1"))
$("#divTitle").removeClass("style1");
$("#divTitle").addClass("style2");
flag = false;
}
else {
if ($("#divTitle").hasClass("style2"))
$("#divTitle").removeClass("style2");
$("#divTitle").addClass("style1");
flag = true;
}
}
window.setInterval(blinkstyle,200);
});
</script>
<style type="text/css">
.style1 {
text-align:center;
width:70%;
height:100px;
line-height:100px;
background-color:red;
color:white;
font-family:Tahoma;
font-size:60px;
border:5px solid green;
border-radius:10px;
box-shadow:gray 10px 15px;
}
.style2 {
text-align:center;
width:70%;
height:110px;
line-height:95px;
background-color:yellow;
color:red;
font-family:'Monotype Corsiva';
font-size:100px;
border:7px solid green;
border-radius:20px;
box-shadow:green 10px 15px;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div id="divTitle">
<b>Mithilesh kumar singh</b>
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment