css 球体效果 |css选择器与js选择器

/* CSS球体代码 */
.ball {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(circle at 20px 20px, #fff 10%, #aaa 30%, #000 80%);
box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5) inset, -20px -20px 40px rgba(255, 255, 255, 0.5) inset;
transform: perspective(500px) rotateX(40deg) rotateY(-20deg) rotateZ(80deg);
}

上面代码中，大家定义了一个.ball元素，并将它的高、宽设为200px，通过border-radius属性将它变成一个圆形，再使用background-image属性添加了一个径向渐变背景色。box-shadow属性为球体添加了阴影效果，使其看起来更具立体感。transform属性则用来定义球体的旋转角度，增强球体的立体感效果。

除了以上代码，还有很多其他的CSS球体效果代码，如使用纯CSS创建球体，使用CSS 3D变换创建球体等。如果你对该效果有兴趣，可以通过学习这些代码来提高自己的CSS技术水平。