jQuery和css的联合使用，简单的网页效果展示

来源：互联网发布：淘宝卖家给买家的好评编辑：程序博客网时间：2024/06/04 19:52
<!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倍，都是鼠标悬浮在照片时的效果
阅读全文
0 0