HTML部分：

            <div id="ball">
                <div></div>
             </div>
            <div class="logo">
                關於網頁設計
            </div>

CSS部分：

#ball>div{
    top: 15px;
    left:700px;
    width:25px;
    height:50px;
    border-radius:0 50px 50px 0;
    position:absolute;
    z-index:10;
    perspective:200px;
    transform:rotateY(0deg);
    animation:bgColor1 4s linear infinite both,rotate 4s infinite both;
    transform-origin:0 50%;
  }
  
  @keyframes bgColor1{
    0%  {background: yellow;}
    50% {background: blue;}
    100% {background: white;}
  }
  @keyframes rotate{
    0%{
      -webkit-transform:rotate(0deg);
    }
    25%{
      -webkit-transform:rotate(90deg);
    }
    50%{
      -webkit-transform:rotate(180deg);
    }
    75%{
      -webkit-transform:rotate(270deg);
    }
    100%{
      -webkit-transform:rotate(0deg);
    }
  }

  #ball>div:after{
    content:'';
    position:absolute;
    z-index:10;
    top:0px;
    left:-25px;
    width:25px;
    height:50px;
    border-radius:50px 0 0 50px;
    background:#a6c5f4;
    animation:bgColor2 4s linear infinite both;
  }
  @keyframes bgColor2{
    0%  {background: red;}
    25% {background: green;}
    75% {background: red;}
    100% {background: red;}
  }

  #ball>div:before{
    content:'';
    position:absolute;
    z-index:11;
    top:0px;
    left:0px;
    width:25px;
    height:50px;
    border-radius:0 50px 50px 0;
    transform-origin:0 50%;
    transform:rotateY(0deg) rotateZ(0deg);
    animation:flipColor 4s linear infinite both,flip 4s linear infinite both;
  }
  @keyframes flip{
    0%    {-webkit-transform:rotateY(0deg);}
    12.5% {-webkit-transform:rotateY(90deg);}
    25%   {-webkit-transform:rotateY(180deg);}
    37.5% {-webkit-transform:rotateY(90deg);}
    50%   {-webkit-transform:rotateY(0deg);}
    62.5% {-webkit-transform:rotateY(90deg);}
    75%   {-webkit-transform:rotateY(180deg);}
    87.5% {-webkit-transform:rotateY(90deg);}
    100%  {-webkit-transform:rotateY(0deg);}
  }
  @keyframes flipColor{
    0%    {background: red;}
    12.5% {background: orange;}
    25%   {background: yellow;}
    37.5% {background: green;}
    50%   {background: blue;}
    62.5% {background: indigo;}
    75%   {background: purple;}
    87.5% {background: white;}
    100%  {background: red;}
  }

1. #ball>div：這是CSS選擇器，用於選中擁有ID為"ball"的元素內部的<div>元素。這些<div>元素將用於創建球體的各個部分，並將應用動畫效果。

2. top: 15px; 和 left: 700px;：設置<div>元素的位置，將其上邊緣距離其包含元素上邊緣15像素，左邊緣距離700像素。這是球體的初始位置。

3. width: 25px; 和 height: 50px;：設置<div>元素的寬度為25像素，高度為50像素，從而創建出球體的形狀。

4. border-radius: 0 50px 50px 0;：設置<div>元素的圓角半徑，使其左上角和左下角是圓角，右上角和右下角是平角，這樣就創建了球體的形狀。

5. position: absolute;：將<div>元素的定位設置為絕對定位，以便可以精確控制其位置。

6. z-index: 10;：設置<div>元素的堆疊順序，使其處於其他元素之上。

7. perspective: 200px;：設置透視效果，用於創建3D效果。

8. transform: rotateY(0deg);：設置<div>元素的初始旋轉為0度，這是動畫的一部分，將使球體旋轉。

9. animation: bgColor1 4s linear infinite both, rotate 4s infinite both;：設置動畫效果，包括兩個不同的動畫。bgColor1動畫將改變背景色，而rotate動畫將使球體旋轉。這些動畫效果將持續進行並無限循環。

10. transform-origin: 0 50%;：設置旋轉的原點，使其在水平軸上位於元素的左側中心位置。

11. @keyframes bgColor1：這是一個CSS關鍵幀動畫，定義了bgColor1動畫的關鍵幀。

12. @keyframes rotate：這是一個CSS關鍵幀動畫，定義了rotate動畫的關鍵幀。

接下來的幾個塊類似地定義了#ball>div:after和#ball>div:before這兩個伪元素的樣式和動畫，它們分別代表球體的陰影和光亮部分，使整個球體看起來更具立體感。

目前製作成果：