图片动画、图层遮罩

最新推荐文章于 2024-11-01 12:26:05 发布

qcsnssdn

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量24

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qcsnssdn/article/details/131814345

版权

<!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: 0;
            padding: 0;

        }

        .a1 {
            width: 500px;
            height: 250px;
            border: 1px solid black;
            margin: 50px auto;

        }

        div ul li {
            list-style: none;
            float: left;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            overflow: hidden;
            /* z-index: 20; */

        }

        img {
            width: 200px;
            height: 200px;
        }

        .a2 {
            width: 200px;
            height: 200px;
            background-color: rgb(188, 103, 103);
            text-align: center;
            position: absolute;
            top: -220px;
            left: 20px;
            z-index: 10;
            
        }

        .a3 {
            width: 200px;
            height: 140px;
            background-color: rgb(188, 103, 103);
            text-align: center;
            position: absolute;
            top: -180px;
            left: 20px;
           

        }

        span {
            background-color: blue;

        }

        ul>li:hover .a2 {
            transform: translateY(240px);
            transition: 0.3s;
        }

        ul>li:hover .a3 {
            transform: translateY(200px);
            transition: 0.3s;
        }
        .a5{
             width: 200px;
            height: 200px;
             transform-origin: bottom;
            transform: rotateX(0);
        }
        ul>li:hover .a5 {

            transform: perspective(120px) rotateX(60deg);
            transition: 0.3s;
        }

        .a4 {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div class="a1">
        <ul>
            <li>
                <img src="./2.ico">
                <div class="a2">
                    <h2>Your Title</h2>
                    <p>Lorem ipsum dolor sitamet, consecteturadlpiscing elit, <br>
                        sed dousmod tempor incididunt ut <br>
                        labore etdolore magna aliqua</p>
                    <span>Learn more</span>

                </div>
            </li>
            <li>
                <img class="a5" src="./2.ico">
                <div class="a3">
                    <h2>Your Title</h2>
                    <p class="a4">Lorem ipsum dolor sitamet, consecteturadlpiscing elit, <br>
                        sed dousmod tempor incididunt ut <br>
                        labore etdolore magna aliqua</p>
                    <span>Learn more</span>
                </div>

            </li>
        </ul>
    </div>
</body>

</html>