<!DOCTYPE html>
<html>
<head>
<style>
.gradient-ball {
width: 100px;
height: 100px;
background: radial-gradient(circle at 30% 30%,
#ffffff 0%,
#4e9eff 30%,
#1e90ff 60%,
#0066cc 100%
);
border-radius: 50%;
position: relative;
box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
}
.gradient-ball::after {
content: '';
position: absolute;
top: 15%;
left: 15%;
width: 30%;
height: 30%;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
filter: blur(3px);
}
.dotted-border {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px dotted rgba(30, 144, 255, 0.5);
border-radius: 50%;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="gradient-ball">
<div class="dotted-border"></div>
</div>
</body>
</html>- 使用 radial-gradient 创建从白色到蓝色的渐变效果
- 添加了顶部左侧的高光效果（白色半透明圆形）
- 外围有一个旋转的虚线边框
- 使用 box-shadow 添加了发光效果
主要的CSS技术点：
- border-radius: 50% 创建圆形
- radial-gradient 创建径向渐变
- ::after 伪元素创建高光效果
- animation 实现虚线边框的旋转效果
你可以通过调整以下参数来自定义效果：
- 改变 width 和 height 调整球的大小
- 修改 radial-gradient 中的颜色值调整渐变效果
- 调整 box-shadow 的值改变发光效果
- 修改 animation 的时间改变旋转速度