动画demo

最新推荐文章于 2024-04-14 12:50:32 发布

「已注销」

最新推荐文章于 2024-04-14 12:50:32 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/awesomedy/article/details/79332067

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: black;
            float: left;
            margin-left: 50px;
            margin-top: 40px;
        }

        .imglist {
            width: 500px;
            height: 300px;
        }

        .ceng {
            position: absolute;
            z-index: 1;
            opacity: 0;
            transition: all 0.5s linear;
            width: 500px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.53);
        }

        .block:hover .ceng {
            opacity: 1;
            transform: translatex(30px) translatey(30px);
        }

        .ceng span {
            color: white;
            font-size: 4em;
            display: inline-block;
            margin-top: 105px;
            transition: all 0.5s linear;
        }

        .block:hover .ceng span {
            transform: translatex(230px);
        }

        .ceng span:hover {
            color: red;
            transform: translatex(230px) rotatez(180deg) !important;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="ceng">
        <span>+</span>
    </div>

</div>
<div class="block">
    <div class="ceng">
        <span>+</span>
    </div>
</div>
<div class="block">
    <div class="ceng">
        <span>+</span>
    </div>
</div>
<div class="block">
    <div class="ceng">
        <span>+</span>
    </div>
</div>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画demo

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .block { position:
复制链接

扫一扫