css 加入购物车动画

CSS 加入购物车动画

.cart-btn {
    font-size: 18px; /* 按钮字体大小 */
    background-color: #ff9900; /* 按钮背景色 */
    border: none; /* 去掉按钮边框 */
    padding: 10px; /* 按钮内部边距 */
    color: #fff; /* 按钮字体颜色 */
    cursor: pointer; /* 鼠标移上去显示手型 */
    border-radius: 50px; /* 圆形边框 */
    Box-shadow: 2px 2px 5px rgba(0,0.3); /* 按钮阴影 */
}
 
.cart-btn:hover {
    background-color: #ffcc33; /* 鼠标移上去背景色变化 */
}
 
.cart-btn .icon {
    display: inline-block; /* 图标内联显示 */
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    margin-right: 10px; /* 图标与文字间距 */
    background-image: url('cart.png'); /* 图标路径 */
    background-size: cover; /* 图标自适应大小 */
}
 
.add-to-cart {
    position: absolute; /* 绝对定位，让动画元素脱离文档流 */
    top: 0; /* 顶部为 0 */
    left: 0; /* 左侧为 0 */
    z-index: 999; /* 元素的 z 轴位置 */
    width: 100%; /* 宽度为 100% */
    height: 100%; /* 高度为 100% */
    background-color: #ffcc33; /* 背景色为黄色 */
    animation: enlarge 0.3s ease-out; /* 动画特效 */
}
 
/* 扩大动画 */
@keyframes enlarge {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

css 加入购物车动画

上述代码是一段 CSS 实现购物车加入动画的代码。在实现购物车加入动画之前，首先需要一个按钮，代码如下：

<button class="cart-btn">
    <i class="icon"></i> 加入购物车
</button>

然后是加入购物车动画的代码：

<div class="add-to-cart"></div>

当点击加入购物车按钮时，会触发加入购物车动画，可以通过 JavaScript 获取动画元素的位置信息，实现动画元素的移动效果。

如果你想了解更多 CSS 动画内容，可以参考本站的 CSS3 教程。

css 加入购物车动画

相关推荐