css3 添加购物车动画效果

在现代电商网站上，关键的功能就是购物车。为了吸引用户添加购物车，可以使用 CSS3 动画效果。这里有一个简单的例子，可以帮助你添加购物车动态效果。

/* 添加购物车的简单动画效果 */@keyframes scale{
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
}
}
/* 购物车图标 */.cart-icon {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background-color: #ff8686;
    color: #fff;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    border-radius: 50%;
    z-index: 1000;
    cursor: pointer;
    animation: scale 0.7s ease-in-out;
}
    

在代码中，我们定义了一个名为“scale”的关键帧，在这个动画中购物车图标会从1倍缩放到1.2倍，然后再回到1倍。你可以看到“animation”属性应用了“scale”关键帧，并设置了0.7秒的持续时间和“ease-in-out”的时间函数，用于控制动画效果的过渡。

贴上 HTML 代码，把购物车图标放到页面中：

!-- 购物车图标 -->
    div class="cart-icon" onclick="addToCart()">
    i class="fa fa-shopping-cart">
    /i>
    /div>

现在你需要为添加到购物车的每个商品添加一个事件监听器。当用户单击“添加到购物车”按钮时，购物车图标应该跳跃或闪烁一次 ，然后在几秒钟后恢复到原始状态：

function addToCart() {
    /* 执行跳跃或闪烁一次的动态效果 */document.querySelector(".cart-icon").classList.add("animated");
setTimeout(function() {
    /* 移除动画类 */document.querySelector(".cart-icon").classList.remove("animated");
}
    , 1000);
}
    

现在你的网站上已经有了简单的购物车动态效果。你可以根据自己的需求做更复杂的动画效果，例如将商品飞入购物车或在购物车图标上添加数量标记。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！