网页动画

最新推荐文章于 2024-03-29 03:34:03 发布

缘分亦至

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/Mr_Cao_/article/details/80301690

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#t1{position: relative;}
#t1 input{
width: 519px;
height: 35px;
}
#t1 img{
width: 40px;
position: absolute;
right: 113px;
top: 10px;
}
#t1 button{
width: 105px;
height: 42px;
background-color: blue;
color: white;
}
#t2{
margin-top: 50px;
}
#import:hover{
transform: scale(1.5);
}
#img1:hover{
transform: scale(1.2);
}
#button1:hover{
transform: scale(2);
color: red;
}
#tu1:hover{
transform: rotate(360deg);
transition-duration: 3s;
}
#tu2:hover{
transform: rotate(-360deg);
transition-duration: 3s;
}
#tu3:hover{
transform: scale(1.5);
}
#tu4:hover{
transform: rotate(50deg);
transition-duration: 3s;
}
</style>
</head>
<body style="background-image: url(../../img/361748.jpg);">
<center>
<img src="../../img/图片1_03.gif"/><br /><br />
<table id="t1">
<tr>
<td>
<img src="../../img/图片1_10.gif" id="img1"/>
<input type="text" name="name" id="import"/>
</td>
<td><button id="button1">百度一下</button></td>
</tr>
</table>
<table id="t2">
<tr>
<td><img src="../../img/图片1_15.gif"/ id="tu1"></td>
<td><img src="../../img/图片1_17.gif"/></td>
<td><img src="../../img/图片1_19.gif"/></td>
<td><img src="../../img/图片1_21.gif"/></td>
<td><img src="../../img/图片1_23.gif"/></td>
</tr>
<tr>
<td><img src="../../img/图片1_30.gif" id="tu2"/></td>
<td><img src="../../img/图片1_31.gif"/></td>
<td><img src="../../img/图片1_32.gif" id="tu3"/></td>
<td><img src="../../img/图片1_33.gif" id="tu4"/></td>
<td><img src="../../img/图片1_34.gif"/></td>
</tr>
</table>
</center>
</body>
</html>