html的网页和图片的动画
<style type="text/css">
body{
background-image: url(../img/timg86UVE11D.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
.main{
width: 800px; height: 500px;
background-color:#614232 ;
margin: 0 auto;
text-align: center;
padding-top: 100px;
}
table{padding: 120px;
margin: auto;
}
#ser{width: 300px;
height: 20px;}
#but{
background-color: #11E1BF;
height: 24px;
}
/*鼠标停留输入框大小变化*/
#ser:hover{
-webkit-transform: scale(1.5,1.5);
}
/*鼠标停留button按钮大小变化，并且字体颜色变化*/
#but:hover{
color:#C44A43;
-webkit-transform: scale(2,2);
}
/*图片所在行整体顺时针旋转360度，*/
#tu1{
-webkit-transition:transform 5s ;
}
#tu1:hover{
-webkit-transform:rotate(360deg);
}
/*当鼠标移动到图片上时，该图片放大1.5倍，移出后恢复原状*/
#tu4:hover{
-webkit-transform: scale(1.5,1.5);
}
/*当鼠标移动到图片上时，顺时针倾斜50度，倾斜*/
#tu1:hover{
-webkit-transform: skew(50deg,0deg);
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<input type="text" id="ser" /><button id="but">百度一下</button>
</div>
<table>
<tr>
<td><img src="../img/hh1.jpg" id="tu1"/></td>
<td><img src="../img/k.jpg" id="tu2/></td>
<td><img src="../img/d.jpg" id="tu3"/></td>
<td><img src="../img/n.jpg" id="tu4"/></td>
</tr>
<tr>
<td><img src="../img/hh1.jpg" id="tu1"/></td>
<td><img src="../img/k.jpg" id="tu2/></td>
<td><img src="../img/d.jpg" id="tu3"/></td>
<td><img src="../img/n.jpg" id="tu4"/></td>
</tr>
</table>
</div>
</body>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Android studio 40 播放网络歌曲
第一步加權限 <uses-permission android:name="android.permission.INTERNET" /> 第二步佈局文件 <Button android:i