淘宝的电子商务网站的建设xp优化大师
学习 渡一课程 多元素组合动画 练习。
在我们开发购物车功能时，经常会有点击添加按钮，就会有一个小圆点掉进购物车的动画，如下图所示，今天我们通过css来实现。
首先实现多元素组合动画
直接上代码，可以复制到本地使用：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>多元素动画</title><style>*{padding: 0;margin: 0;}.view{width: 400px;height: 600px;position: relative;border: 1px solid #dedede;}.ShoppingCart {position: absolute;right: 0;bottom: 0;text-align: center;width: 80px;height: 40px;background-color: blueviolet;color: #ffffff;}.add {position: relative;width: 20px;height: 20px;top:50px;left: 10px;background-color: blue;color: #ffffff;text-align: center;line-height: 20px;cursor: pointer;border-radius: 50%;}.box{position: absolute;top: 0;left: 0;display: none;}.active{display: block;animation: move1 0.6s cubic-bezier(0, 0.36, 1, 0.59);}.ball{width: 20px;height: 20px;top: 0;left: 0;border-radius: 50%;background-color: blue;position: absolute;z-index: -1;}.active .ball{animation: move2 0.6s cubic-bezier(0.35,-0.35, 1, 0.38);}@keyframes move1 {to {transform: translateX(350px);}}@keyframes move2 {to {transform: translateY(510px);}}</style>
</head><body><div class="view"><div class="add" id="add">+<div class="box"><div class="ball"></div></div></div><div class="ShoppingCart">购物车</div></div></body>
<script> let add = document.querySelector(".add")let box = document.querySelector(".box")add.addEventListener("click",()=>{box.className = "box active"setTimeout(()=>{box.className = "box"},2000)})
</script>
</html>实现多个动画
上代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>多种元素动画</title><style>*{padding: 0;margin: 0;}.view{width: 400px;height: 600px;position: relative;border: 1px solid #dedede;}.ShoppingCart {position: absolute;right: 0;bottom: 0;text-align: center;width: 80px;height: 40px;background-color: blueviolet;color: #ffffff;}.add {position: relative;width: 20px;height: 20px;top:50px;left: 10px;background-color: blue;color: #ffffff;text-align: center;line-height: 20px;cursor: pointer;border-radius: 50%;}.box{position: absolute;top: 0;left: 0;animation: move1 0.6s cubic-bezier(0, 0.36, 1, 0.59);}.ball{width: 20px;height: 20px;top: 0;left: 0;border-radius: 50%;background-color: blue;position: absolute;z-index: -1;animation: move2 0.6s cubic-bezier(0.35,-0.35, 1, 0.38);}@keyframes move1 {to {transform: translateX(350px);}}@keyframes move2 {to {transform: translateY(510px);}}</style>
</head><body><div class="view"><div class="add" id="add">+</div><div class="ShoppingCart">购物车</div></div></body>
<script> let add = document.querySelector(".add")let box = document.querySelector(".box")add.addEventListener("click",()=>{let ele = document.createElement("div")ele.className = "box"ele.innerHTML = "<div class='ball'></div>"add.appendChild(ele)setTimeout(()=>{ele.parentNode.removeChild(ele);},1000)})
</script>
</html>