jquery实现添加购物车动画效果代码-html代码-BFW代码库

jquery实现添加购物车动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现添加购物车动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
    <style>


        html, body {
            height: 100%;
            min-height: 100%;
            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            background-color: #1F1F1F
        }

        *, *:before, *:after {
            box-sizing: border-box;
        }

        .page-wrapper {
            min-height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .page-wrapper button {
            padding: 20px;
            border: none;
            background: #d5d8e7;
            position: relative;
            outline: none;
            border-radius: 5px;
            color: #292d48;
            font-size: 18px;
        }
        .page-wrapper button .cart-item {
            position: absolute;
            height: 24px;
            width: 24px;
            top: -10px;
            right: -10px;
        }
        .page-wrapper button .cart-item:before {
            content: "1";
            display: block;
            line-height: 24px;
            height: 24px;
            width: 24px;
            font-size: 12px;
            font-weight: 600;
            background: #2bd156;
            color: white;
            border-radius: 20px;
            text-align: center;
        }
        .page-wrapper button.sendtocart .cart-item {
            display: block;
            animation: xAxis 1s forwards cubic-bezier(1, 0.44, 0.84, 0.165);
        }
        .page-wrapper button.sendtocart .cart-item:before {
            animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .cart {
            position: fixed;
            top: 60px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: #292d48;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
        }
        .cart i {
            font-size: 25px;
            color: white;
        }
        .cart:before {
            content: attr(data-totalitems);
            font-size: 12px;
            font-weight: 600;
            position: absolute;
            top.........完整代码请登录后点击上方下载按钮下载查看