关于扑克牌翻转触发hover

最新推荐文章于 2022-07-09 11:06:15 发布

leasin_

最新推荐文章于 2022-07-09 11:06:15 发布

阅读量817

点赞数

分类专栏： Html-5

本文链接：https://blog.csdn.net/XiaoBuHome/article/details/52965428

版权

Html-5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

附源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       
        div{
            width: 100px;
            height: 300px;
            margin: 50px auto;
            /*box-shadow: 10px 10px 10px gray;*/
            border-radius: 10px;
            position:relative;
        }
        div img{
            width: 100px;
            height: 300px;
            position: absolute;
            border-radius: 10px;
            transition: all 0.7s;
            transform-origin: bottom center;
        }

        div:hover img:nth-child(1) { transform: rotate(40deg); }
        div:hover img:nth-child(2) { transform: rotate(30deg);}
        div:hover img:nth-child(3) { transform: rotate(20deg); }
        div:hover img:nth-child(4) { transform: rotate(10deg); }
        div:hover img:nth-child(5) { transform: rotate(0deg);  }
        div:hover img:nth-child(6) { transform: rotate(-10deg);  }
        div:hover img:nth-child(7) {  transform: rotate(-20deg); }
        div:hover img:nth-child(8) {transform: rotate(-30deg); }
        
    </style>
</head>
<body>


    <div>
        <img src="4.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
          <img src="9.jpg" alt="">
        <img src="5.jpg" alt="">
       <img src="18.jpg" alt="">
        <img src="11.jpg" alt="">
        <img src="15.jpg" alt="">
    </div>
</body>
</html>

效果截图：

知识点：

* {margin：0；padding：0} 该语句表示全局元素的外边距、内边距都设置为0；
transition：all 0.7s 该语句表示翻转的时间一共是0.7s
border-radius：10px 该语句表示四角的弧度为10px，如果不设置该值，那么四角为棱角
设置的div和div img的值必须一样
transform-origin：bottom center 该语句表示翻转的点的位置
div:hover img:nth-child(1) { transform: rotate(40deg); } 该语句表示当鼠标进入div时，第一张图片翻转的角度是40度，第一张图片指最底下那一张。
transform：rotate(40deg) 该语句表示翻转的类型(rotate)及角度(40deg)