5.7 (案例) 扑克牌

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 01:18 被阅读0次

5.7 (案例) 扑克牌
文魁大脑实用记忆第五期武林计划唐门潘晓欣第九次案例---高效学习
day10 备份恢复
祖永胜逆袭案例四-扑克牌
2019-01-01
【文魁大脑实用记忆第五期】唐门刘爽第七次案例
【文魁大脑实用记忆第五期】唐门刘爽第八次案例-气泡图和地理想象
消费
MySQL技巧：处理重复数据
ubuntu安装mysql5.7教程

扑克牌.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扑克牌</title>
    <style type="text/css">
    div{
        height: 400px;
        width: 200px;
        position: relative;
        margin: 50px auto;
    }
    img{
        width: 200px;
        height: 400px;
        border: 1px solid #ccc;
        position: absolute;
        border-radius: 5px;
        transform-origin:bottom center;
        transition:1s all ease-in-out;
    }
    div:hover img:nth-child(1){
        transform: rotate(-35deg)
    }
    div:hover img:nth-child(2){
        transform: rotate(-25deg)
    }
        div:hover img:nth-child(3){
        transform: rotate(-15deg)
    }
        div:hover img:nth-child(4){
        transform: rotate(-5deg)
    }
        div:hover img:nth-child(5){
        transform: rotate(5deg)
    }
        div:hover img:nth-child(6){
        transform: rotate(15deg)
    }
        div:hover img:nth-child(7){
        transform: rotate(25deg)
    }
        div:hover img:nth-child(8){
        transform: rotate(35deg)
    }
    </style>
</head>
<body>
    <div id="mydiv">
        
        ![](../css/i/1.jpg)
        ![](../css/i/2.jpg)
        ![](../css/i/3.jpg)
        ![](../css/i/4.jpg)
        ![](../css/i/z1.png)
        ![](../css/i/3.jpg)
        ![](../css/i/1.png)
        ![](../css/i/0.jpg)
    </div>

    <script type="text/javascript">
        var mydiv = document.getElementById('mydiv');
        var img = document.getElementsByTagName('img');
        img.map(function(item){
            return console.log(item.index)
        })
        console.log(img.length) 
    </script>
</body>
</html>