百度主页

最新推荐文章于 2023-09-22 12:00:05 发布

98K

最新推荐文章于 2023-09-22 12:00:05 发布

阅读量455

点赞数

本文展示了一个使用纯CSS实现的网页布局示例，其中包括图片的倾斜、旋转和缩放等交互式动画效果。通过:hover伪类触发不同的CSS transform属性，如scale、rotate和skew，来增强用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: url(img/aa.jpg);
background-size: 100%;
}
.img{
height: auto;
width: auto;

}
.edi{
height: auto;
width: auto;

}
.text{
width: 500px;
height: 30px;
background: url(img/small.png) center no-repeat;
background-size: 29px 29px;
background-position: 470px;

}
.text:hover{
transform: scale(1.5, 1.5);
}
.btn:hover{
transform: scale(1.5,1.5);
}
#img1:hover{
transform: skew(50deg);
}

#img2:hover{
transform: skew(-50deg);
}
#img4:hover{

animation: 0.4s xz;
}
@-webkit-keyframes xz{
100%{
transform: rotate(-360deg);
}

}

#img3:hover{
animation: 0.5s xx;
}
@-webkit-keyframes xx{
100%{
transform: rotate(360deg);
}

}
#no1:hover{
animation: 8s n1;
}
@-webkit-keyframes n1{
100%{
transform: rotate(680deg);
}
}
#no2:hover{
animation: 8s n1;
}
@-webkit-keyframes n1{
100%{
transform: rotate(-680deg);
}
}
}

</style>
</head>
<body class="tup" >
<div align="center" class="img" >
<img src="img/baidu.png" />
</div>
<div class="edi" align="center">
<table>
<tr>
<td><input type="text" class="text" /></td>
<td><input class="btn" type="button" value="百度一下" style="background-color: #3388FF; width: 150px; height: 40px; color: azure; border: none;" /></td>
</tr>
</table>
</div>
<table align="center" width="1000px" height="500px">
<tr align="center" id="no1">
<td ><img id="img1" src="img/a.jpg" width="150px" height="150px"></td>
<td><img id="img2" src="img/f.jpg" width="150px" height="150px"></td>
<td><img id="img3" src="img/g.jpg" width="150px" height="150px"></td>
<td><img id="img4" src="img/IMG_0143.GIF" width="150px" height="150px"></td>
<td><img id="img5" src="img/a.jpg" width="150px" height="150px"></td>
</tr>
<tr id="no2">
<td><img id="img6" src="img/a.jpg" width="150px" height="150px"></td>
<td><img id="img7" src="img/a.jpg" width="150px" height="150px"></td>
<td><img id="img8" src="img/a.jpg" width="150px" height="150px"></td>
<td><img id="img9" src="img/a.jpg" width="150px" height="150px"></td>
<td><img id="img0" src="img/a.jpg" width="150px" height="150px"></td>
</tr>
</table>

</body>
</html>