css实现2d动态

不成功

于 2022-10-23 23:41:31 发布

阅读量208

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_60122365/article/details/127483376

版权

鼠标经过时变样式：hover

可以用这个样式在css里实现一些简单的动态效果

过度 transition=all（time）

可用在过度时间

transform: scale

transform: scale(1.1);原图1.1倍大小

透明度 opacity:

通过这些即可实现一些简单的变化

<body>
    <div class="box">
        <div class="dynamic1"><img src="img/084b55f40378012df02464c3481c6a0354e6de1a.jpg" alt="">
            <div class="dynamic1-details"><span>仙人兜</span>
                <p>我已退下蛇皮升华成龙!</p>
            </div>


        </div>
        <div class="dynamic2"><img src="img/9ea1c916384b49c6b83e5f6e4489ef40.png" alt="">
            <div class="dynamic2-details"><span>佩恩</span>
                <p>神罗天征！</p>

            </div>
        </div>

        <div class="dynamic3"><img src="img/t01fb6f22a4c2c52467.jpg" alt="">
            <div class="dynamic3-details"><span>白面具</span>
                <p> 没有希望也没有光明，有的只有绝望</p>

            </div>
        </div>

        <div class="dynamic4"><img src="img/v2-e3c7fe7369cbe0aded680875f00f125b_r.jpg" alt="">
            <div class="dynamic4-details"><span>长门</span>
                <p> 拥有轮回眼的力量，胜利是必然的</p>

            </div>
        </div>

    </div>

</body>

css样式

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            display: flex;
            margin: 100px auto;
            justify-content: space-around;
        }

        .box img {
            width: 320px;
            height: 184px;
        }

        .box {
            transform: scale(1.1);

        }

        .box .dynamic1:hover {
            transform: scale(1.1);
        }

        .box .dynamic2:hover {
            transform: scale(1.1);
        }

        .box .dynamic3:hover {
            transform: scale(1.1);
        }

        .box .dynamic4:hover {
            transform: scale(1.1);
        }

        .dynamic1,
        .dynamic2,
        .dynamic3,
        .dynamic4 {
            transition: all 1.5s;
        }


        .dynamic1-details {
            background-color: rgb(108, 104, 104);
            opacity: 0.6;
            display: none;
            width: 320px;
            height: 184px;
            border: 2px solid rgb(230, 209, 17);
            color: aliceblue;
            text-align: center;
            padding-top: 80px;
            transition: all 2s;
        }

        .box .dynamic1:hover .dynamic1-details {
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .dynamic2-details {
            background-color: rgb(108, 104, 104);
            opacity: 0.6;
            display: none;
            width: 320px;
            height: 184px;
            border: 2px solid rgb(230, 209, 17);
            color: aliceblue;
            text-align: center;
            padding-top: 80px;

        }

        .dynamic2:hover .dynamic2-details {
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .dynamic3-details {
            background-color: rgb(108, 104, 104);
            opacity: 0.6;
            display: none;
            width: 320px;
            height: 184px;
            border: 2px solid rgb(230, 209, 17);
            color: aliceblue;
            text-align: center;
            padding-top: 80px;
        }

        .box .dynamic3:hover .dynamic3-details {
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .dynamic4-details {
            background-color: rgb(108, 104, 104);



            display: none;
            width: 320px;
            height: 184px;
            border: 2px solid rgb(230, 209, 17);
            color: aliceblue;
            text-align: center;
            padding-top: 80px;
        }

        .box .dynamic4:hover .dynamic4-details {
            display: block;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>

效果图涉及到动图

复制后更改图片即可实现

不成功

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现2d动态

鼠标经过时变样式：hover可以用这个样式在css里实现一些简单的动态效果过度 transition=all（time）可用在过度时间transform: scaletransform: scale(1.1);原图1.1倍大小透明度 opacity:通过这些即可实现一些简单的变化
复制链接

扫一扫