使用CSS3自制loading转圈动画

"css3如何绘制一个圆圆的loading转圈动画" 在本文中，我们将深入探讨如何使用CSS3来创建一个圆形的loading转圈动画。这个动画涉及到多个小圆圈，它们会按照一定的顺序改变透明度，形成旋转的效果。这种效果在网页和小程序中非常常见，用于指示页面正在加载数据。 ### 1. 基本原理 创建这样一个动画的核心在于两个方面：动画的动态效果和布局的设定。动态效果是通过CSS3的`animation`属性实现的，给每个小圆设置不同的透明度变化和启动时间。布局则依赖于相对定位(`position: relative`)的父元素和绝对定位(`position: absolute`)的小圆。每个小圆的位置通过调整`left`, `right`, `top`, 和 `bottom`属性来确定，使其均匀分布在同一个圆形轨迹上。 ### 2. 位置设置技巧 初次尝试时，可能会遇到将圆圈放置在菱形或正方形中的问题。要解决这个问题，我们需要理解圆的对称性。正确的布局方法是将圆圈放在正方形的对角线上，确保它们在视觉上形成一个完整的圆。对于对角线上的圆，可以使用`left`和`top`或`right`和`bottom`同时设置为`50%`，然后使用`transform`属性进行偏移。对于非对角线上的圆，坐标可以通过一定的数学公式计算得出。例如，如果大圆的半径为`$radius`，那么圆心的偏移量可以是`$radius - $dotWidth/2`，这里的`$dotWidth`是小圆的宽度。 ### 3. CSS代码实现 在CSS中，我们可以定义变量来控制尺寸，例如： ```css $width: 64px; $height: 64px; $dotWidth: 10px; $dotHeight: 10px; $radius: 5px; $offset: 9.37px; ``` 然后，为每个小圆创建类，并应用适当的样式，包括位置和动画： ```css .dotdot1 { left: 50%; top: $offset; transform: translateX(-50%); animation: dotFadeInOut 1s infinite linear 0.05s; } .dotdot2 { left: $offset; top: 50%; transform: translateY(-50%); animation: dotFadeInOut 1s infinite linear 0.1s; } /* ... 类似地设置其他圆圈... */ ``` 动画效果可以通过`@keyframes`规则定义： ```css @keyframes dotFadeInOut { 0%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } ``` 这个动画会让每个小圆在0%和100%时完全可见，而在25%和75%时完全不可见，形成循环的视觉效果。 ### 4. 动画的灵活性 为了适应不同大小的loading动画，我们可以根据需要调整`$width`, `$height`, `$dotWidth`, `$dotHeight`, 和 `$radius`这些变量的值。确保圆圈的数量和它们的布局能够根据这些尺寸的变化而自适应。 总结来说，利用CSS3的动画和定位功能，我们可以轻松创建出各种复杂且具有吸引力的loading转圈动画，只需灵活地调整布局和动画参数即可。这样的技术不仅适用于Web开发，还可以应用于小程序和其他需要加载指示的地方。