html-transform+onmouseover-08

来源：互联网发布：软件著作权使用说明书编辑：程序博客网时间：2024/05/19 12:16
<!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>   <div 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'"/>   </div>   <div class="you">   <img class="img2" src="image/phone.png" style="margin-top:80px ; margin-left:80px"/>   </div></body></html>
阅读全文
0 0