CSS3-购物车飞入动画

最新推荐文章于 2021-06-04 16:51:44 发布

ah_ty

最新推荐文章于 2021-06-04 16:51:44 发布

阅读量1.7k

点赞数

分类专栏： CSS3，动画

本文链接：https://blog.csdn.net/u011060906/article/details/73139929

版权

CSS3，动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

购物车飞入动画：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .con{
            width: 1000px;
            height: 700px;
            border: 1px solid transparent;
            position:relative;
        }

        .che{
            width: 200px;
            height:200px;
            background-image: url("img/c.jpg");
            background-repeat: no-repeat;
            margin-top: 100px;
            margin-right: 100px;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .cont{
            height: 280px;
            margin-top: 50%;
        }

        .wu1{
            width: 200px;
            height: 250px;
            margin: 10px;
            background-image: url("img/10.png");
            background-repeat: no-repeat;
            -webkit-transition: all 1s;
            float: left;
        }

        .wu1:active{
            transform: translate(350%,-180%) scale(0.3);
            opacity:0
        }

        .wu2{
            width: 200px;
            height: 250px;
            margin: 10px;
            background-image: url("img/12.png");
            background-repeat: no-repeat;
            -webkit-transition: all 1s;
            float: left;
        }

        .wu2:active{
            transform: translate(250%,-180%) scale(0.3);
            opacity:0
        }

        .wu3{
            width: 200px;
            height: 250px;
            margin: 10px;
            background-image: url("img/13.png");
            background-repeat: no-repeat;
            -webkit-transition: all 1s;
            float: left;
        }

        .wu3:active{
            transform: translate(140%,-180%) scale(0.3);
            opacity:0
        }

        .wu4{
            width: 200px;
            height: 250px;
            margin: 10px;
            background-image: url("img/13.png");
            background-repeat: no-repeat;
            -webkit-transition: all 1s;
            float: left;
        }

        .wu4:active{
            transform: translate(30%,-180%) scale(0.3);
            opacity:0
        }
    </style>
</head>
<body>
<div class="con">
    <div class="che"></div>

    <div class="cont">
        <div class="wu1"></div>
        <div class="wu2"></div>
        <div class="wu3"></div>
        <div class="wu4"></div>
    </div>
</div>


</body>
<html>

运行结果:

ah_ty

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3-购物车飞入动画

购物车飞入动画： .con{ width: 1000px; height: 700px; border: 1px solid transparent; position:relative; } .che{
复制链接

扫一扫