本文主要是介绍仿 支付宝蚂蚁森林中的树 抖一抖小动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个动画的难点是树的元素一定要设置绝对定位,bottom:0,这样改变树的高度的时候树才会向上伸展,而不是根据文档流向下伸展.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>摇一摇</title><script src="./js/js.js"></script><script src="./js/jquery-1.9.1.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.box {width: 100%;height: 5rem;position: relative;top: 33rem;}.zz {width: 100%;height: 33rem;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}@keyframes move {0% {height: 33.2rem;}25% {height: 36rem;}50% {height: 33.2rem;}75% {height: 34rem;}100% {height: 33rem;}}.move {animation: move 1s linear 1;}
</style><body><div><div class="box"><img class="zz" src="./img/tree.png" alt=""></div></div>
</body><script>$(document).ready(function () {$('.zz').click(function () {$('.zz').addClass('move')$('.zz').bind('animationend', function () {$('.zz').removeClass('move')})})})
</script></html>
这篇关于仿 支付宝蚂蚁森林中的树 抖一抖小动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
