css3 球 动画:如何用CSS3制作一个简单的球体动画？
Q: 如何用CSS3制作一个简单的球体动画？
A: 首先创建一个div元素作为球体，设置宽高相等并用border-radius:50%使其变成圆形。然后通过background属性添加径向渐变，模拟立体球面光影效果。接着使用@keyframes定义动画关键帧，可以设置transform的translate或rotate属性让球体移动或旋转。最后在球体元素上应用animation属性，指定动画名称、持续时间、循环方式等。例如animation: bounce 2s infinite alternate;即可让球体不断弹跳，配合box-shadow还能增强真实感。
Q: CSS3中如何让球体实现弹跳动画效果？
A: 弹跳动画主要依靠@keyframes和transform实现。先用border-radius:50%和径向渐变画好球体。定义关键帧：0%时translateY(0)，50%时translateY(-200px)，100%时translateY(0)，同时可在触底时用scale压缩球体模拟形变。animation-timing-function可以用ease-in模拟上抛减速，ease-out模拟下落加速。若想更真实，可为动画添加cubic-bezier自定义缓动曲线。最后animation: bounce 1s infinite让球持续弹跳。
Q: 如何用CSS3实现3D旋转的球体动画？
A: 首先给父容器设置perspective属性创建3D透视空间，例如perspective:800px。球体元素上使用transform-style:preserve-3d保留3D效果。然后通过@keyframes定义rotateY从0deg到360deg的动画，让球体绕Y轴旋转。为了让球有立体感，可以在球面上添加纹理或使用多个伪元素模拟经纬线。也可以结合rotateX和rotateY让旋转更丰富。最后用animation: spin 3s linear infinite让球体匀速自转，呈现3D旋转效果。
Q: CSS3球体动画中如何添加光影和渐变效果？
A: 光影效果主要靠background的radial-gradient实现。设置渐变中心稍微偏移左上角，如radial-gradient(circle at 30% 30%, #fff, #4a90d9, #1a3a6b)，这样球体会有高光和暗部，呈现立体感。再用box-shadow添加投射阴影，如box-shadow: 0 10px 20px rgba(0,0,0,0.3)。如果球体在弹跳，阴影也应随高度变化，可以通过另一个关键帧控制阴影的缩放和透明度。此外inset阴影能加强球体边缘的厚度感，让球看起来更真实。
关于“css3 球 动画”的对话
交流“css3 球 动画”的常见场景
【前端新手小张】 大佬，我想做一个CSS3的球体动画，就是那种立体的球，能旋转的，该从哪里入手啊？
【CSS动画专家老陈】 你好！CSS3做立体球其实有几种思路。最简单的是用径向渐变模拟球体光影，配合旋转动画。要做真3D的话，可以用transform的rotate3d配合多个圆环叠加。
【前端新手小张】 径向渐变那个我见过，就是background: radial-gradient(circle at 30% 30%, #fff, #000)这种对吧？但它看起来还是扁的，怎么让它转起来有立体感？
【CSS动画专家老陈】 对，那个是伪3D。要转起来有立体感，关键是让高光点动起来。你可以用@keyframes改变渐变的位置，模拟光源变化。或者用box-shadow做内阴影，让球面有凹凸感。
【前端新手小张】 明白了。那真3D那种呢？我听说要设置transform-style: preserve-3d？
【CSS动画专家老陈】 没错！你需要一个父容器设置perspective，子元素设置transform-style: preserve-3d。然后球体可以用很多个圆环（border-radius: 50%）绕不同轴旋转叠加，形成球面。
【前端新手小张】 圆环叠加？是不是像经线那样，一个个半圆转不同角度？
【CSS动画专家老陈】 对！比如用12个div，每个都是圆形边框，然后rotateY(0deg)到rotateY(165deg)均匀分布，再加一个rotateX(90deg)的赤道环。这样看起来就像个线框球。
【前端新手小张】 那这些环怎么让它们一起旋转呢？给父容器加animation？
【CSS动画专家老陈】 是的，父容器加animation: spin 5s linear infinite; keyframes里写transform: rotateX(...) rotateY(...)。注意父容器也要preserve-3d，否则子元素会被压平。
【前端新手小张】 我试了一下，为什么我的环都叠在一起了，没有立体感？
【CSS动画专家老陈】 检查一下每个环的transform顺序。应该是先rotateY再translateZ？不对，环本身不用translateZ。你要给每个环设置不同的rotateY角度，并且它们都绝对定位在中心。父容器要有perspective，比如800px。
【前端新手小张】 哦，我忘了加perspective。加上之后确实有深度了！但是环看起来是扁的椭圆，不是正圆。为什么？
【CSS动画专家老陈】 因为透视会让远处的圆变形。如果你想要正圆效果，可以给每个环加transform: rotateY(角度) translateZ(半径)？不对，那样会散开。其实线框球在3D旋转时本来就会变成椭圆，这是正常的透视效果。
【前端新手小张】 原来如此，那如果我想做一个实心的球，表面有纹理那种，该怎么做？
【CSS动画专家老陈】 实心球比较难用纯CSS做。你可以用很多个div拼成球面，但性能很差。更好的方案是用CSS的background-image加一个球体贴图，然后用border-radius: 50%和径向渐变做光影，再用transform: rotate3d做整体旋转。
【前端新手小张】 那光影怎么跟着转呢？如果球转了，高光位置应该也变吧？
【CSS动画专家老陈】 对，你可以用两个伪元素，一个做高光，一个做阴影，然后给它们也加旋转动画，但方向和球体相反，模拟光源固定。或者更简单，用conic-gradient做动态光影，配合animation改变角度。
【前端新手小张】 conic-gradient？这个我还没用过，能举个例子吗？
【CSS动画专家老陈】 比如background: conic-gradient(from 0deg, #fff, #888, #000, #888, #fff); 然后animation里改变from的角度，看起来就像光在转。再叠一个radial-gradient做球面明暗，效果不错。
【前端新手小张】 太感谢了！我这就去试试。最后问一下，性能上有什么要注意的吗？
【CSS动画专家老陈】 尽量用transform和opacity做动画，它们能触发GPU加速。避免动画里改width/height。如果环太多，可以适当减少数量，或者用will-change: transform提升性能。祝顺利！
