CSS动画打造支付宝蚂蚁森林式积分领取效果

本文将详细介绍如何使用CSS和JavaScript实现一个领积分效果，灵感来源于支付宝蚂蚁森林中的能量领取功能。该效果主要包括以下几个步骤： 1. **整体构思**： 以地球为中心，创建一个半圆区域，围绕着多个积分元素模拟星星闪烁效果。当用户点击时，积分从天空中滑落至地球表面，树上的能量值增加，并伴随膨胀效果。 2. **实现半圆围绕效果**： 利用CSS定位和`border-radius`创建圆形区域。关键在于根据角度计算积分元素的位置，通过JavaScript函数`getRandomArbitrary()`生成随机角度，将其转换为弧度并计算出对应的x和y坐标。同时，使用贝塞尔曲线动画（通过`timeFun`数组）来控制积分元素的闪烁效果。 示例代码： ```javascript let angle = Math.PI / 180 * getRandomArbitrary(90, 270); i.x = xAxis + 100 * Math.sin(angle); i.y = 100 + 100 * Math.cos(angle); i.timing = timeFun[parseInt(getRandomArbitrary(0, 3))]; ``` 3. **积分闪烁动画**： 使用CSS的`transform: translateY()`属性创建积分元素的上下滑动效果。动画名设置为`slideDown`，通过动画循环实现闪烁。这可以确保积分在每次领取时都表现出类似星星的动态效果。 CSS样式示例： ```css .foo { animation-name: slideDown; animation-duration: ...; // 根据需求调整动画持续时间 animation-timing-function: ease-in-out; // 动画速度曲线 animation-iteration-count: infinite; // 循环播放 animation-direction: alternate; // 上下交替滑动 height: 30px; /* 元素高度 */ } ``` 4. **积分递增和膨胀效果**： 在积分滑落并消失后，树上的能量值会递增。这部分通常会配合JavaScript更新DOM元素内的积分数值，并可能使用CSS transition来实现积分数量增加后的膨胀效果。然而，具体实现未在给出的内容中详述，可能涉及DOM操作和CSS3的`transform: scale()`或`transition`属性。 实现这个领积分效果主要利用了CSS动画、数学计算（包括角度到弧度转换）、以及JavaScript的随机数生成和DOM操作。通过巧妙结合这些技术，可以创造出流畅且具有互动性的积分领取体验。