照片墙

最新推荐文章于 2020-08-16 16:15:53 发布

晴风雪舞

最新推荐文章于 2020-08-16 16:15:53 发布

阅读量336

点赞数

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/swiftwwj/article/details/54615175

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

照片墙：鼠标悬浮事件（旋转+放大）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background: lightgray;
            }
            #box{
                width: 1200px;
                height: 450px;
                /* margin 有4种*/
                /* 一种是一个值的，一种是2个的，3个，4个*/
                /* 2个值无论是哪一个值 第一个值都是从上开始的，并且是顺时钟数*/
                /* 4上右下左， 3上 左右 下， 2上下 左右， 1*/
                margin: 0 auto;
                /* 0的时候可以不加px，其他数值都要加px*/
            }
            img{
                width: 200px;
                margin: 10px;
                border: 5px white solid;
                /* 5 5 5 右偏移，下偏移，阴影虚化程度*/
                box-shadow: gray 5px 5px 5px;
                /* background: white;
                padding: 7px;*/
                /* transition 过度*/
                transition: 1.5s;
            }
            .pic1{
                /* transform 变换 rotate 旋转*/
                transform: rotate(-5deg);
            }
            .pic2{
                transform: rotate(30deg);
            }
            .pic3{
                transform: rotate(-11deg);
            }
            .pic4{
                transform: rotate(-2deg);
            }
            .pic5{
                transform: rotate(80deg);
            }
            .pic6{
                transform: rotate(-1deg);
            }
            .pic7{
                transform: rotate(20deg);
            }
            .pic8{
                transform: rotate(-7deg);
            }
            .pic9{
                transform: rotate(14deg);
            }
            /*当鼠标悬浮到img元素的时候*/
            img:hover{
                transform: rotate(0deg) scale(1.05);
            }
            .pic6:hover{
                transform: rotate(90deg) scale(1.05);
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!--属性和属性之间有空格-->
            <img src="img/1.jpg" class="pic1"/>
            <img src="img/2.jpg" class="pic2"/>
            <img src="img/3.jpg" class="pic3"/>
            <img src="img/4.jpg" class="pic4"/>
            <img src="img/5.jpg" class="pic5"/>
            <img src="img/6.jpg" class="pic6"/>
            <img src="img/7.jpg" class="pic7"/>
            <img src="img/8.jpg" class="pic8"/>
            <img src="img/9.jpg" class="pic9"/>
        </div>
    </body>
</html>

当鼠标悬浮在一张图片上时，图片会自动旋转并放大

晴风雪舞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
照片墙

照片墙：鼠标悬浮事件（旋转+放大）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margin: 0; pa
复制链接

扫一扫