1-2-11 【实战】CSS实现卡包特效

Liyager · 简书 · · 2020-11-09 12:06

题外话 ：建议各位同学看到效果后，先自己写代码实现，然后再看标准答案，会发现一些自己想不到的知识盲区哦~

文章内容输出来源 ：拉勾教育大前端就业集训营

案例：通过CSS实现“卡包”特效

各位同学一定要自己先试试，然后再看答案，会收获更多~

标准答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            position: relative;
            width: 250px;
            height: 187px;
            /* border: 1px solid; */
            margin: 350px auto;
        }
        div img{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            height: 187px;
            transition: all 0.5s linear 0s;
            transform-origin: right top;
        }
        div:hover :nth-child(1){
            transform: rotate(60deg);
        }
        div:hover :nth-child(2){
            transform: rotate(120deg);
        }
        div:hover :nth-child(3){
            transform: rotate(180deg);
        }
        div:hover :nth-child(4){
            transform: rotate(240deg);
        }
        div:hover :nth-child(5){
            transform: rotate(300deg);
        }
        div:hover :nth-child(6){
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="cat01.jpeg" alt="">
        <img src="cat02.jpg" alt="">
        <img src="cat03.jpeg" alt="">
        <img src="cat04.jpg" alt="">
        <img src="cat05.jpg" alt="">
        <img src="cat06.jpg" alt="">
    </div>
</body>
</html>

说明：图片是笔者自己随便找的，大家也自己下载一些喜欢的图片试试吧。

错误答案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            position: relative;
            width: 250px;
            height: 187px;
            /* border: 1px solid; */
            margin: 350px auto;
        }
        div img{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            height: 187px;
            transition: all 0.5s linear 0s;
            transform-origin: right top;
        }
        .img1:hover{
            transform: rotate(60deg);
        }
        .img2:hover{
            transform: rotate(120deg);
        }
        .img3:hover{
            transform: rotate(180deg);
        }
        .img4:hover{
            transform: rotate(240deg);
        }
        .img5:hover{
            transform: rotate(300deg);
        }
        .img6:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="cat01.jpeg" class="img1">
        <img src="cat02.jpg"  class="img2">
        <img src="cat03.jpeg" class="img3">
        <img src="cat04.jpg"  class="img4">
        <img src="cat05.jpg"  class="img5">
        <img src="cat06.jpg"  class="img6">
    </div>
</body>
</html>

说明：

思路大体是对的“定位+每个图片hover”，但是！别忘了定位是有 压盖顺序的 ，所以鼠标移动到图片上时，其实 只触发了第六个img 的hover。

要解决这个问题，就需要使用 父元素的hover ，统一用父元素的鼠标悬停事件，来控制6个子元素的旋转。

这里有个知识点 ：事件捕获时就是按照元素从上到下去执行的，doucment->html->body->父级->子级->子级的子级。

所以，统一用父元素的某个事件，可以有效的解决子元素压盖的问题。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

此处感谢小鹿老师，回答了我这个超纲的问题~

结束语 ：一花一世界，一木一浮生，愿与诸君共勉

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博