<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #button:hover{ transform:scale(1,1.5); } #kuang:hover{ transform:scale(1,2); color: red; } .img1{ width: 152px; height: 136px; } .img1:hover{ transform:skew(0,50deg);/*設置當鼠標劃過或停到圖片上時圖片順時針傾斜25度*/ -ms-transform:skew(0,50deg); /* Internet Explorer 9*/ -moz-transform:skew(0,50deg); /* Firefox */ -webkit-transform:skew(0,50deg); /* Safari 和 Chrome */ -o-transform:skew(0,50deg); } .img2{ width: 152px; height: 136px; } .img3{ width: 152px; height: 136px; } .img3:hover{ transition: transform 1s ease; transform: rotate(-360deg); } .img4{ width: 152px; height: 136px; } .img4:hover{ transform:scale(1,1.5); } .img5{ width: 152px; height: 136px; } .img6{ width: 152px; height: 136px; } .img7{ width: 152px; height: 136px; } .img8{ width: 152px; height: 136px; } .img9{ width: 152px; height: 136px; } .img10{ width: 152px; height: 136px; } </style> </head> <body background="qwq.png" width="100%" height="100%"> <div style="width:655px;height:40px; margin-top: 172px; margin-left: 385px; "> <input type="text" id="button"; style="width:520px;height:37px;"> <input type="button" id="kuang"; value="百度一下" style="width: 106px; height:43px; background-color: #3388ff; "> </div> <table style="width:792px; height: 285px; margin-top: 109px; margin-left: 305px; background-color: #3388ff " > <tr> <td> <img src="01.png" class="img1" style="animation: rotate"> <img src="02.png" class="img2"> <img src="03.png" class="img3"> <img src="04.png" class="img4"> <img src="05.png" class="img5"> </td> </tr> <tr> <td> <img src="06.png" class="img6" style="animation: rotate"> <img src="07.png" class="img7"> <img src="09.png" class="img8"> <img src="08.png" class="img9"> <img src="05.png" class="img10"> </td> </tr> </table> </body> </html>
/**
*2圖傾斜45度，3圖逆時針旋轉360,4圖變大1.5倍，都是鼠標懸浮在照片時的效果
*
*/