首先通过html创建一个div容器作为加载球体；2. 使用css的radial-gradient结合两个圆形渐变模拟球体光影效果，并设置background-size和background-position控制渐变区域；3. 利用css变量–progress动态控制radial-gradient的大小，实现进度变化；4. 将background-color设为#fff或透明，确保渐变进度可见；5. 通过javascript的requestanimationframe逐步更新–progress值，模拟0%到100%的加载过程；6. 可添加loader-text元素并用javascript同步更新加载百分比文本；7. 当进度达到100%时，执行隐藏动画或显示内容等后续操作；8. 优化性能可使用will-change: transform触发硬件加速，减少dom操作频率；9. 自定义颜色可通过修改radial-gradient中的颜色值实现，也可调整渐变位置或类型增强视觉效果；最终实现一个平滑、可定制的加载进度球体动画，并在加载完成后执行相应逻辑。
使用CSS和
radial-gradient
渐变，可以创建一个引人入胜的加载进度球体动画。核心在于利用
radial-gradient
模拟球体的光影效果，并结合
animation
属性驱动进度变化。
首先，你需要一个HTML元素作为容器：
接下来，是CSS部分，这才是灵魂所在。我们先定义一个基本的球体样式：
立即学习“前端免费学习笔记（深入）”；
.loader { width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at top left, #29abe2, #fff 20%), radial-gradient(circle at bottom right, #29abe2, #fff 20%); background-color: #29abe2; /* fallback color */ background-size: 50% 50%; background-position: top left, bottom right; background-repeat: no-repeat; animation: rotate 2s linear infinite;}@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
这段代码创建了一个圆形，并使用两个
radial-gradient
模拟光影效果。
animation
属性让它旋转起来。但是，这只是个旋转的球体，还不是加载进度。
如何实现加载进度？
关键在于动态改变
radial-gradient
的大小和位置。我们可以使用CSS变量和JavaScript来实现。
CSS变量驱动的进度控制
首先，在CSS中定义变量控制渐变的位置和大小：
.loader { /* ... 之前的样式 ... */ --progress: 0%; /* 初始进度 */ background: radial-gradient(circle at top left, #29abe2 var(--progress), transparent var(--progress)), radial-gradient(circle at bottom right, #29abe2 var(--progress), transparent var(--progress)); background-color: #fff; /* 覆盖之前的 fallback color */ background-size: 50% 50%; background-position: top left, bottom right; background-repeat: no-repeat; animation: none; /* 移除旋转动画，改为进度动画 */}@keyframes progress { 0% { --progress: 0%; } 100% { --progress: 100%; }}
现在，
radial-gradient
的大小由
--progress
变量控制。 注意
background-color
要改为
#fff
，否则进度会看不出来。移除旋转动画，因为我们想让它显示进度。
JavaScript控制CSS变量
然后，使用JavaScript来动态改变
--progress
的值：
const loader = document.querySelector('.loader');let progress = 0;function updateProgress() { progress += 1; // 模拟加载进度 loader.style.setProperty('--progress', `${progress}%`); if (progress < 100) { requestAnimationFrame(updateProgress); }}requestAnimationFrame(updateProgress);
这段代码会不断增加
--progress
的值，从而改变
radial-gradient
的大小，模拟加载进度。
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
为什么我的球体看起来怪怪的？
可能是
background-color
的设置问题。 确保
background-color
设置为与背景相同的颜色，或者设置为透明，才能看到
radial-gradient
的效果。 另外，
background-size
和
background-position
的设置也很重要，它们决定了光影的位置和大小。
如何优化动画性能？
使用
will-change
属性:
will-change: transform;
可以告诉浏览器提前优化
transform
属性的动画。
避免频繁的DOM操作: 尽量减少JavaScript对DOM的直接操作，可以将数据缓存起来，然后一次性更新DOM。
使用硬件加速: 确保你的动画使用了硬件加速，可以提高动画的流畅度。
如何改变球体的颜色和光影效果？
修改
radial-gradient
的颜色值即可。例如，将
#29abe2
改为其他颜色，或者添加更多的颜色值，可以创建更复杂的光影效果。 你还可以尝试改变
radial-gradient
的位置，例如
circle at center
，或者使用不同的渐变类型，例如
linear-gradient
。
如何添加加载文本？
可以在HTML中添加一个
span
元素，用于显示加载文本，然后使用JavaScript来动态更新文本内容。
Loading... 0%
.loader-container { position: relative;}.loader-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px;}
const loaderText = document.querySelector('.loader-text');function updateProgress() { progress += 1; // 模拟加载进度 loader.style.setProperty('--progress', `${progress}%`); loaderText.textContent = `Loading... ${progress}%`; // 更新文本 if (progress < 100) { requestAnimationFrame(updateProgress); }}
加载完成后如何处理？
在JavaScript中，当
progress
达到100%时，可以执行加载完成后的操作。例如，隐藏加载动画，显示内容，或者跳转到其他页面。
if (progress < 100) { requestAnimationFrame(updateProgress);} else { // 加载完成后的操作 loaderContainer.style.display = 'none'; // 隐藏加载动画 // 显示内容...}
总而言之，使用
radial-gradient
创建加载进度球体动画是一个灵活且强大的方法。 掌握了这些技巧，你就可以创建出各种各样的加载动画，让你的网站更加生动有趣。
以上就是CSS怎样制作加载进度球体动画？radial-gradient渐变的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1086452.html
微信扫一扫 
支付宝扫一扫 
