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

最新推荐文章于 2022-08-22 21:20:41 发布

天生犯二

最新推荐文章于 2022-08-22 21:20:41 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/qq_40040163/article/details/78188595

版权

<!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

收藏

觉得还不错? 一键收藏
0
评论
jQuery和css的联合使用，简单的网页效果展示

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> #button:hover{ transform:scale(1,1.5); } #kuang:hover{
复制链接

扫一扫