CSS3 加载动画效果

English | 中文

介绍

本项目包含了一系列现代且美丽的 CSS3 加载动画效果。所有动画效果完全使用 CSS3 实现，包括旋转、跳跃、旋转等多种类型的加载效果。所有动画效果都非常轻量，只依赖 CSS3，不需要使用任何 JavaScript，因此非常容易集成到任何网页项目中。

特性

• 纯 CSS3 动画：这些动画效果完全使用 CSS3 属性如 @keyframes、transform、transition 等创建。
• 易于使用：只需复制和粘贴 HTML 和 CSS 代码即可将动画集成到你的项目中。
• 响应式：这些动画适配不同的屏幕尺寸。
• 多种动画效果：包括从简单的旋转到复杂的动态效果，涵盖了各种加载需求。

使用方法

1. 克隆或下载仓库：

   git clone https://github.com/poboll/css3-loading-effects.git

2. 打开每个动画文件夹中的 index.html 文件，直接查看动画效果。

你也可以直接复制各个文件夹中的 HTML 和 CSS 代码，将其集成到你自己的项目中。

示例代码

例如，要使用旋转圆圈动画，包含以下 HTML 代码：

<div class="spinner-box">
  <div class="circle-border">
    <div class="circle-core"></div>
  </div>  
</div>

并添加对应的 CSS：

.spinner-box {
  /* 你的 CSS 代码 */
}

每个动画效果都有自己的文件夹，其中包含一个 index.html 文件，方便预览和集成。

在线预览

你可以通过 GitHub Pages 查看所有动画效果的在线预览：

GitHub Pages 在线预览

---

CSS3 Loading Effects

中文 | English

Introduction

This repository contains a collection of modern and beautiful loading animations built entirely with CSS3. It includes various types of loading effects such as spinning, bouncing, rotating, and more. All animations are lightweight, purely CSS-based, and do not require any JavaScript, making them easy to integrate into any web project.

Features

• Pure CSS3 Animations: These animations are created using only CSS3 properties like @keyframes, transform, transition, etc.
• Easy to Use: Just copy and paste the HTML and CSS code to integrate the animations into your project.
• Responsive: The animations adapt well to different screen sizes.
• Variety of Animations: Includes a wide range of effects, from simple spinning to complex dynamic animations.

How to Use

1. Clone or download the repository:

   git clone https://github.com/poboll/css3-loading-effects.git

2. Open the index.html file located in each animation folder to preview the animation.

You can also directly copy the HTML and CSS code from the folders to use them in your own project.

Example Usage

For example, to use the spinning circle animation, include the following HTML:

<div class="spinner-box">
  <div class="circle-border">
    <div class="circle-core"></div>
  </div>  
</div>

And add the corresponding CSS:

.spinner-box {
  /* Your CSS code here */
}

Each animation has its own folder with an index.html file for easy preview and integration.

Live Preview

You can view the live demo of the animations on GitHub Pages here:

Live Preview on GitHub Pages

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• All animations are created with CSS3 only.
• No JavaScript is used in this project.