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 实现购物车加入动画的代码。在实现购物车加入动画之前,首先需要一个按钮,代码如下:
<button class="cart-btn"> <i class="icon"></i> 加入购物车 </button>
然后是加入购物车动画的代码:
<div class="add-to-cart"></div>
当点击加入购物车按钮时,会触发加入购物车动画,可以通过 JavaScript 获取动画元素的位置信息,实现动画元素的移动效果。