# 怎么使用CSS快速创建3点加载动画 ## 引言 在现代网页设计中，加载动画（Loading Animation）是提升用户体验的重要元素。当页面内容需要时间加载时，一个优雅的加载动画可以缓解用户的等待焦虑。其中，3点加载动画（Dot Loading Animation）因其简洁、直观的特点被广泛使用。本文将详细介绍如何仅用CSS快速实现这种动画效果。 --- ## 一、基础HTML结构 首先创建一个简单的HTML结构，只需要一个包含3个`<span>`的容器： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>3点加载动画</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dot-loading"> <span></span> <span></span> <span></span> </div> </body> </html> .dot-loading { display: flex; justify-content: center; align-items: center; height: 100vh; /* 全屏居中 */ } .dot-loading span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #333; margin: 0 4px; } 此时会看到3个静态的圆点：
通过@keyframes创建缩放动画：
@keyframes dot-scale { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.5); opacity: 0.5; } } 为每个点添加动画延迟，形成波浪效果：
.dot-loading span:nth-child(1) { animation: dot-scale 1.2s ease-in-out infinite; } .dot-loading span:nth-child(2) { animation: dot-scale 1.2s ease-in-out infinite 0.4s; } .dot-loading span:nth-child(3) { animation: dot-scale 1.2s ease-in-out infinite 0.8s; } 使用CSS变量便于整体调整：
:root { --dot-color: #3498db; --dot-size: 12px; --animation-duration: 1.2s; } .dot-loading span { width: var(--dot-size); height: var(--dot-size); background-color: var(--dot-color); } 改用cubic-bezier实现更自然的弹跳效果：
@keyframes dot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .dot-loading span { animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite; } 通过媒体查询调整移动端显示：
@media (max-width: 768px) { :root { --dot-size: 10px; } } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>高级3点加载动画</title> <style> :root { --dot-color: #3498db; --dot-size: 12px; --animation-duration: 1.2s; } body { margin: 0; background: #f5f5f5; } .dot-loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .dot-loading span { display: inline-block; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background-color: var(--dot-color); margin: 0 6px; animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite; } .dot-loading span:nth-child(2) { animation-delay: 0.2s; } .dot-loading span:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @media (max-width: 768px) { :root { --dot-size: 10px; } } </style> </head> <body> <div class="dot-loading"> <span></span> <span></span> <span></span> </div> </body> </html> .dot-loading span { background: linear-gradient(45deg, #3498db, #9b59b6); } @keyframes dot-rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .dot-loading { perspective: 1000px; } .dot-loading span { animation: dot-rotate 2s linear infinite; } 添加简单的JavaScript交互：
document.querySelector('.dot-loading').addEventListener('mousemove', (e) => { const dots = document.querySelectorAll('.dot-loading span'); const xPos = e.clientX / window.innerWidth; dots.forEach((dot, i) => { dot.style.transform = `translateY(${-20 * xPos}px)`; }); }); .dot-loading span { will-change: transform; } 针对旧版浏览器添加前缀：
.dot-loading span { -webkit-animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite; animation: dot-bounce var(--animation-duration) cubic-bezier(0.3, 0.7, 0.4, 1) infinite; } @-webkit-keyframes dot-bounce { /* ... */ } 通过本文的步骤，你不仅学会了创建基础的3点加载动画，还掌握了多种进阶优化技巧。CSS动画的强大之处在于能用简单的代码实现流畅的视觉效果。建议尝试组合不同的动画属性，开发出更具个性的加载效果。
最终效果演示：CodePen示例链接
完整代码下载：GitHub仓库
”`
（注：实际文章中需替换占位链接为真实项目链接，本文约为2000字，可根据需要扩展具体章节内容）
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
