baidua

最新推荐文章于 2022-06-24 18:38:08 发布

心意张国荣

最新推荐文章于 2022-06-24 18:38:08 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/qq_40072332/article/details/78453989

版权

<!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>无标题文档</title>
<style>
.img{
width:270px;
height:129px;
}
.haha{
width:500px;
height:30px;
margin-top:50px;
position:relative;/*相对定位*/
}
.input{
width:300px;
height:30px;
border:1 solid blue;
}
.a{
width:80px;
height:35px;
background-color:blue;
color:#fff;
text-decoration:none;
}
.photo{
position: absolute;/*绝对定位*/
margin-top:9px;
margin-left:-30px;
width:24px;height:24px;
background:url(images/haha.png) no-repeat;
}
.input:hover{
transform:scale(1.5);
}
.a:hover{
transform:scale(1.2);
color:red;
}
.photo:hover{
transform:scale(1.2);
}

img{
width:100px;
height:100px;
}
#first{
width:600px;
margin-top:100px;
}
/*#first:hover{
transform:rotate(360deg);
transition:2s;
}*/
#first .img1:hover{
transform:rotate(360deg);
transition:1s;
}

#second .img2:hover{
transform:rotate(-360deg);
transition:1s;
}
#bianda:hover{
transform:scale(1.5);
}
/*#second:hover{
transform:rotate(-360deg);
transition:2s;
}*/
#qingxie:hover{
transform:skew(-50deg);
}
</style>
</head>

<body style="background:url(images/bj.jpg) no-repeat; background-size:cover">
<center>
<img class="img" src="images/logo.png"/><br />
<div class="haha">
<input class="input" />
<span class="photo"></span>
<button href="#" class="a">百度一下</button>
</div>

<div id="first">
<img src="images/999_07.jpg" class="img1" />
<img src="images/999_09.jpg" />
<img src="images/999_11.jpg" />
<img src="images/999_13.jpg" />
<img src="images/999_15.jpg" />
</div>

<div id="second">
<img src="images/999_17.jpg" class="img2"/>
<img src="images/999_22.jpg" />
<img src="images/999_23.jpg" id="bianda"/>
<img src="images/999_24.jpg" />
<img src="images/999_25.jpg" id="qingxie"/>
</div>
</center>
</body>
</html>