CSS实现添加购物车效果

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

这篇文章用CSS实现添加购物车的效果

可以使用码上掘金的功能在线体验动画效果

主要逻辑

点击按钮增加了一个classname loading

    &.loading {
        --scale: .95;
        --span-y: -32px;
        --icon-r: 180deg;
        --fill: 1;
        --fill-d: .8s;
        --offset: 0;
        --offset-d: 1.73s;
        .cart {
            animation: cart 3.4s linear forwards .2s;
        }
    }

各个属性讲解

• --scale:整个按钮缩放 从0.75 --> 0.95
• --span-y: add to cart向上移动32px transform: translateY(var(--span-y, 0)); var的第二个0为默认值
• --icon-r: 加号(两个横杆通过after和before实现)，transform: scale(.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0)), 改变旋转角度
• --icon-y: 向上移动

初始化cart是不可见

向左移动位置

购物车是一个svg图片

   .cart {
      animation: cart 3.4s linear forwards .2s;
   }
        @keyframes cart {
    12.5% {
        transform: translateX(-60px) rotate(-18deg);
    }
    25%,
    45%,
    55%,
    75% {
        transform: none;
    }
    50% {
        transform: scale(.9);
    }
    44%,
    56% {
        transform-origin: 12px 23px;
    }
    45%,
    55% {
        transform-origin: 50% 50%;
    }
    87.5% {
        transform: translateX(70px) rotate(-18deg);
    }
    100% {
        transform: translateX(140px) rotate(-18deg);
    }
}

@keyframes 可以细化每一段动画内容，控制购物车的移动和大小变化，具体可以看代码研究每一段的作用，这里就不多细讲

还有一个填充购物车被填充白色背景的功能

        svg {
            z-index: 1;
            width: 36px;
            height: 26px;
            display: block;
            position: relative;
            fill: none;
            stroke: var(--cart);
            stroke-width: 2px;
            stroke-linecap: round;
            stroke-linejoin: round;
            polyline {
                &:last-child {
                    stroke: var(--tick);
                    stroke-dasharray: 10px;
                    stroke-dashoffset: var(--offset, 10px);
                    transition: stroke-dashoffset .4s ease var(--offset-d);
                }
            }
        }

本来的购物车颜色为

 --background: #362A89;
 --tick: var(--background);
  stroke: var(--tick);
  
              polyline {
                &:last-child {
                    stroke: var(--tick);
                    stroke-dasharray: 10px;
                    stroke-dashoffset: var(--offset, 10px);
                    transition: stroke-dashoffset .4s ease var(--offset-d);
                }
            }