核心提示：html-transform+onmouseover代码实例!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www...
html-transform+onmouseover代码实例
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>08代码</title>
<style>
body{
background:url(image/bg.jpg)
}
.zuo{
width:60%;
height:800px;
float:left;
}
.you{
width:40%;
height:800px;
float:left;
}
.p1{
font-size:55px;
margin-top:100px;
margin-left:80px;
color:#FFF;
}
.p2{
font-size:35px;
margin-top:80px ;
margin-left:80px;
color:#FFF;
}
.p1:hover{
transform:scale(1.2);
color:#F00;
}
.p2:hover{
transform:rotate(360deg);
transition-duration:2s;
}
.img2:hover{
transform:skew(0deg,25deg)
}
</style>
</head>
<body>
<p class="zuo">
<p class="p1" ><b>Blue App</b> Template</p>
<p class="p2">One page Responsive HTML5<br>parallax business landing page</p>
<p style="font-size:18px; margin-top:80px ; margin-left:80px; color:#FFF">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Similique autem,<br>
atque in voluptatibus repellat nostrum iusto <br>
architecto vel placeat numquam omnis assumenda.
</p>
<img src="image/003.png" style="margin-top:80px ; margin-left:80px" onmouseover="this. src='image/001.png'" onmouseout="this. src='image/003.png'"/>
</p>
<p class="you">
<img class="img2" src="image/phone.png" style="margin-top:80px ; margin-left:80px"/>
</p>
</body>
</html>
