微信小程序CSS3动画解析：双块舞效果

本文主要介绍了如何在微信小程序中使用CSS3实现几个有趣的动画效果，特别是双块舞动画的实现过程。 微信小程序允许开发者通过引入CSS3特性来创建丰富的视觉效果和动态交互。在这个例子中，我们看到的是一个双块舞动画，两个小方块在屏幕上来回旋转，形成一种独特的视觉体验。这种效果是通过精心设计的CSS3关键帧动画（@keyframes）和变换（transform）属性实现的。 首先，HTML部分（在微信小程序中使用WXML表示）创建了两个拥有不同类名的div元素，即`.sk-cube1`和`.sk-cube2`，它们都包含在拥有类名`.sk-wandering-cubes`的父容器中。这些元素的宽度、高度和背景颜色都是预先设定的，以确保动画的可见性。 接着，CSS部分是实现动画的核心。`.sk-wandering-cubes .sk-cube`选择器设置了所有立方体的基本样式，如背景颜色、大小、绝对定位以及初始位置。然后，使用`-webkit-animation`和`animation`属性指定动画名称、持续时间、延迟、填充模式和播放次数。在这个案例中，动画名称为`sk-wanderingCube`，持续时间为1.8秒，动画采用缓入缓出的效果，并无限次循环播放。 对于`.sk-cube2`，我们看到它有一个额外的`-webkit-animation-delay`属性，设置了0.9秒的延迟，使得第二个立方体在动画开始时比第一个晚0.9秒启动，从而产生交错的效果。 关键帧动画`@-webkit-keyframes sk-wanderingCube`定义了动画过程中各个时间点的样式变化。从0%到25%，两个立方体分别进行旋转（rotate）和水平位移（translateX），并调整缩放比例（scale），实现了一个90度的旋转。接着，为了在Firefox中正确实现旋转方向，50%的关键帧应用了一个特别的Hack。最后，75%和100%的关键帧让立方体回到初始位置，完成一个完整的循环。 总结来说，这个微信小程序中的双块舞动画通过CSS3的`@keyframes`规则、`transform`属性和`animation`属性的结合，成功地在两个立方体之间创建了一个流畅且有趣的交互效果。开发者可以根据自己的需求调整动画参数，如速度、颜色、延迟等，以适应不同的应用场景。