HTML+CSS body元素只使用伪元素，就能实现好看的加载中loading特效，菊花转圈圈的效果，页面居中显示，黑色背景，圈圈是彩色。
CSS加载特效（四种方案）
啥也不说，先看效果！
方案一：彩虹粒子菊花
代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
body::before,
body::after {
content: '';
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
animation: particleSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
body::before {
box-shadow:
0 -25px 0 3px hsl(0,100%,50%),
18px -18px 0 3px hsl(90,100%,50%),
25px 0 0 3px hsl(180,100%,50%);
}
body::after {
box-shadow:
-18px -18px 0 3px hsl(270,100%,50%),
0 -25px 0 3px hsl(45,100%,50%),
18px -18px 0 3px hsl(135,100%,50%);
animation-delay: -0.4s;
}
@keyframes particleSpin {
100% { transform: rotate(360deg); }
}
</style>
</head>
<body></body>
</html>
效果特点：
🌀 双环菊花效果：通过两个伪元素的错位旋转实现层次感
⚫ 纯黑色动态线条：主环全黑，辅助环半透明黑
🎯 自动居中：适配任何屏幕尺寸
⚡ 流畅动画：使用硬件加速的 transform 属性
参数调整指南：
尺寸调整：修改 width 和 height 值（保持相同数值）
速度调整：修改 animation 的持续时间（如 0.8s 加快）
粗细调整：修改 border-width 值
颜色调整：修改 border-top-color 颜色值
实现原理：
通过 border-top-color 单独设置动态颜色，其他边框设为透明/浅色
两个伪元素设置不同尺寸和动画速度，形成错位旋转的层次感
border-radius: 50% 强制元素显示为圆形
通过 opacity 控制辅助环的透明度，避免颜色重叠过深
方案二：圆环式简洁版
<!DOCTYPE html>
<html>
<head>
<style>
/* 重置默认样式并设置基础布局 */
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: black;
position: relative; /* 为伪元素定位提供参考 */
}
/* 使用 ::after 伪元素创建加载动画 */
body::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
border: 10px solid rgba(250, 50, 250, 0.8); /* 背景圆环颜色 */
border-top-color: white; /* 前景旋转颜色 */
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* 旋转动画定义 */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 无需任何额外HTML内容 -->
</body>
</html>
效果说明：
✅ 纯 CSS 实现，无需任何 HTML 元素
✅ 黑色转圈圈动画居中显示
✅ 白色页面背景
✅ 使用伪元素 ::after 实现
✅ 自动适配不同屏幕尺寸
关键实现点：
通过 body 的 min-height: 100vh 确保全屏高度
使用 Flex 布局的 justify-content: center 和 align-items: center 实现居中
伪元素通过 position: absolute + 中心定位实现精确居中
通过透明边框和黑色顶部边框实现环形效果
border-radius: 50% 创建正圆形
无限循环的旋转动画
如果要调整样式：
修改尺寸：调整 width 和 height 值
修改颜色：调整 border-top-color
修改线宽：调整 border-width
修改速度：调整 animation-duration (数值越小越快)
方案三：渐变色光晕
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #000;
}
body::before {
content: '';
width: 180px;
height: 180px;
border: 10px solid;
border-radius: 50%;
position: relative;
animation: neonSpin 2s ease infinite;
border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff) 1;
filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}
body::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border: 6px dashed rgba(255,255,255,0.9);
border-radius: 50%;
animation: spin 4s linear infinite reverse;
}
@keyframes neonSpin {
50% { border-image-source: linear-gradient(135deg, #ff00ff, #ffff00, #00ffff); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body></body>
</html>
原来的border-top-color是黑色，可以改为渐变色或者循环变化的颜色。可能需要使用动画来改变颜色，或者应用CSS渐变。
以下是黑色版本：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: black;
position: relative;
}
body::before {
content: '';
width: 160px;
height: 160px;
border: 6px solid transparent;
border-top-color: black;
border-radius: 50%;
position: relative;
animation: neonSpin 1s ease infinite;
filter: drop-shadow(0 0 4px rgba(250,250,250,0.7));
}
body::after {
content: '';
position: absolute;
width: 180px;
height: 180px;
border: 4px dashed rgba(250,250,250,0.6);
border-radius: 50%;
animation: spin 3s linear infinite reverse;
}
@keyframes neonSpin {
50% { border-top-color: rgba(250,250,250,0.9); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
</body>
</html>
方案四：渐变色扭曲环
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #000;
}
body::before {
content: '';
width: 160px;
height: 160px;
border: 8px solid;
border-radius: 50%;
animation: twist 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
border-image: conic-gradient(#ff0000, #00ff00, #0000ff, #ff0000) 1;
}
@keyframes twist {
0%, 100% {
transform: rotate(0deg) scale(1);
border-width: 8px;
}
50% {
transform: rotate(180deg) scale(0.9);
border-width: 30px;
}
}
</style>
</head>
<body></body>
</html>
黑白色方案：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: white;
}
body::before {
content: '';
width: 150px;
height: 150px;
border: 8px solid;
border-color: black transparent;
border-radius: 50%;
animation: twist 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
@keyframes twist {
0%, 100% {
transform: rotate(0deg) scale(1);
border-width: 8px;
}
50% {
transform: rotate(180deg) scale(0.9);
border-width: 20px;
}
}
</style>
</head>
<body>
</body>
</html>
方案五：彩虹像素矩阵
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
body::before {
content: '';
width: 250px;
height: 250px;
position: relative;
background:
linear-gradient(90deg,
#ff0000 25%,
#00ff00 0 50%,
#0000ff 0 75%,
#ff00ff 0
);
background-size: 8px 8px;
animation: quantum 0.8s steps(8) infinite;
mask: radial-gradient(circle at center, #000 40%, transparent 65%);
}
@keyframes quantum {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body></body>
</html>
方案六：量子跃进
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
body::before {
content: '';
width: 40px;
height: 40px;
position: relative;
background:
linear-gradient(black 50%, transparent 0),
linear-gradient(90deg, transparent 50%, black 0);
background-size: 4px 4px;
animation: quantum 0.8s steps(8) infinite;
}
@keyframes quantum {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
</body>
</html>
首先，我得确认用户的需求。他们想要一个居中的黑色转圈圈，白色背景，并且只用body的伪元素。这意味着不能添加任何额外的HTML元素，只能使用::before或::after伪元素。
接下来，我需要考虑如何实现这个效果。通常，加载动画需要一个旋转的圆环，这通常通过边框和旋转动画来实现。之前用户提供的例子中，旋转圆环使用了border属性，尤其是border-top-color来突出显示旋转部分。现在需要将这个效果应用到body的伪元素上。
首先，要让body充满整个视口，设置宽度和高度为100vh，使用flex布局来居中伪元素。但body默认的margin可能会有影响，所以需要重置margin为0，并设置overflow为hidden，防止滚动条出现。
然后，使用body::after作为旋转元素。设置content为''，绝对定位，通过top和left各50%来定位到中心，再使用transform: translate(-50%, -50%)来精确居中。宽高设为50px，边框4px，颜色为#f3f3f3，顶部边框颜色为黑色，形成圆环。动画使用spin，持续1秒，无限循环。
关键点在于确保伪元素正确居中。可能遇到的问题包括body的高度没有撑满视口，所以需要设置min-height: 100vh。另外，伪元素需要设置position: absolute，而body需要position: relative，否则定位会相对于视口而不是body，这可能影响居中效果。
颜色方面，用户要求白色背景和黑色圈圈。所以body的背景设为白色，伪元素的border-top-color设为黑色，其他边框颜色可以设为浅灰色，或者直接让其他边框透明，这样只显示顶部边框。不过用户提供的例子中用了#f3f3f3作为其他边框颜色，但用户可能希望圈圈是纯黑色，所以可能需要调整。例如，可以将整个边框设为黑色，但透明度不同，或者只显示顶部边框为黑色，其他边框透明。但用户可能希望的是类似旋转圆环的效果，即一个圆环的部分颜色不同，旋转时形成动画。因此，可能需要将border设置为全黑色，但通过border-top-color和border-bottom-color等来调整，但用户可能只需要一个简单的黑色圈圈旋转。
另外，检查是否需要圆角边框，即border-radius: 50%，来形成圆形。动画使用transform的rotate，从0到360度。
可能的调整点包括边框的大小、颜色，动画的速度，以及是否需要有透明度效果。例如，让整个边框是黑色，但旋转时顶部边框更显眼，或者使用边框的透明度变化。
测试代码时，需要确保body的伪元素正确显示，并且居中。可能需要检查CSS的层叠关系，以及伪元素是否被正确应用。此外，确保没有其他样式干扰，比如用户现有的CSS可能需要重置。
最后，用户可能希望这个加载动画在页面加载时显示，之后通过JavaScript隐藏，但用户的问题仅限于CSS实现，所以暂时不需要考虑交互部分。提供的代码应该独立，不需要额外HTML，只需添加到CSS中即可。
如何仅使用CSS的body元素伪元素来实现加载动画，现在再次提问类似的问题，但这次提到“菊花转圈圈的效果”。我需要先理解“菊花转圈”指的是哪种效果。通常，菊花加载效果是指多个线条或点围绕中心旋转，类似于iOS的加载图标，而不仅仅是单个圆环旋转。
用户可能对之前的回答中的单一圆环效果不满意，希望更复杂的多线条旋转。但用户强调只能使用伪元素，也就是只能使用::before和::after，所以需要考虑如何用这两个伪元素模拟菊花效果。
首先，菊花效果通常由多个线条组成，但伪元素只有两个，可能需要用渐变或边框样式来创建多个线条的视觉效果。例如，使用渐变色来分割伪元素，形成多个颜色块，然后旋转它们。
接下来，用户需要页面居中显示，白色背景，黑色圈圈。要确保伪元素在body中居中，使用flex布局或者绝对定位。由于body需要设置min-height:100vh来撑满整个视口，同时display: flex; justify-content: center; align-items: center; 可以让伪元素居中。
然后，考虑如何用两个伪元素创建菊花效果。可能的方案是：让::before和::after各自创建不同的旋转边框或渐变，组合起来形成多个线条的效果。例如，一个伪元素用虚线边框，另一个用实线，或者使用圆锥渐变模拟多个线条。
另外，动画方面需要连续的旋转，使用@keyframes spin来无限循环旋转。可能需要不同的动画时间或方向，让两个伪元素的旋转有所区别，增加层次感。
需要注意的是，伪元素的数量限制，所以可能需要更复杂的CSS技巧。例如，使用边框的透明度来创建间断效果，或者利用渐变生成多个色块，旋转时形成动态变化。
最后，测试代码是否满足所有条件：仅使用body的伪元素，菊花效果，居中，白色背景，黑色元素。确保代码简洁，没有使用额外HTML元素，兼容主流浏览器，并且动画流畅。
可能的实现步骤：
设置body的样式，使其成为flex容器并居中。
使用::before和::after伪元素创建两个圆形元素。
利用边框或渐变生成多个线条效果。
应用旋转动画，并调整动画参数以形成菊花转动的视觉效果。
调整颜色、边框宽度和动画时间以达到最佳效果。
首先，背景颜色的修改应该在每个方案的body样式中将background设置为black或者#000。这点用户之前已经提过，所以可能已经处理过，但需要确认每个方案的背景都正确修改了。
接下来，菊花变成彩色，这里的“菊花”可能指的是粒子菊花特效（方案一）中的粒子颜色，但用户可能希望所有方案中的加载元素都改为彩色。需要逐个分析每个方案的颜色使用情况，并替换成彩色。
对于方案一：粒子菊花特效，原来的box-shadow使用的是黑色和不同透明度的黑色。需要将这些颜色替换为彩色，比如使用不同的HSL颜色或者渐变色。可能需要为每个粒子设置不同的颜色，比如红、绿、蓝，或者使用渐变色来创造彩虹效果。
方案二：霓虹光晕，原来的border-top-color是黑色，可以改为渐变色或者循环变化的颜色。可能需要使用动画来改变颜色，或者应用CSS渐变。
方案三：3D扭转变换，边框颜色是黑色，可以替换为渐变色或彩色，比如使用border-image属性或者渐变色边框。
方案四：量子跃迁特效，原来的线性渐变是黑色，可以改为彩色渐变，比如多个颜色的交替。
还需要考虑颜色的过渡和动画效果，使彩色变化更动态。比如在方案二中，可以使用关键帧动画改变border-top-color的颜色值，实现颜色渐变效果。
此外，用户可能希望彩色效果更鲜艳，所以可能需要提高颜色的饱和度和明度。同时，检查每个方案的伪元素是否正确应用了颜色修改，特别是box-shadow和border-color等属性。
在调整颜色时，要注意对比度，确保在黑色背景上彩色元素足够明显。可能需要测试不同的颜色组合，确保视觉效果符合预期。
最后，整合所有修改后的代码，确保每个方案的独立性和正确性，提供完整的HTML文件，方便用户直接使用。
六套方案完整源代码：
下载地址：点击下载
参考文献：
1、基于Uni-app前端框架的SUMER UI3.0组件库
2、uniapp精仿支付宝UI界面源码下载，基于SumerUI一款仿支付宝APP
3、uniapp精仿微信源码，基于SumerUI一款仿微信APP应用
SUMER UI【用于开发APP、小程序、H5网站、毕业设计…】
评论