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