是否曾經拍攝過某些物體快速移動的照片，尤其是在光線不足的情況下，并變成了模糊的條紋？還是整個相機都晃了晃，整個鏡頭變成了一系列條紋？這是運動模糊，是相機工作原理的副產品。

運動模糊101

想象一下相機。它有一個百葉窗，一扇門打開以允許光線進入，然后關閉以阻止光線進入。從它打開到關閉的時間是一張照片或一幅運動圖像。

如果在按下快門期間框架的對象在移動，我們最終會拍攝到物體移動的照片。在電影上，這表現為穩定的涂片，對象在其起點到終點之間處于無限多個位置。運動對象最終也變成半透明的，在它后面可以看到部分背景。

計算機要偽造的方法是對幾個子幀進行建模，然后以不透明度的一小部分將它們組合在一起。將同一對象的大量副本沿運動路徑放置在稍有不同的位置，可以創建令人信服的運動模糊傳真。

視頻合成應用程序傾向于對其運動模糊應具有的細分設置進行設置。如果將此值設置得非常低，則可以確切地看到該技術的工作原理，例如，一個簡單的白點動畫的幀，每幀四個樣本：

運動模糊所需的樣本數量完全與內容有關。邊緣鋒利的小東西移動得很快，將需要很多子幀。但是一些模糊的動作緩慢移動可能只需要幾個。通常，使用更多會產生更令人信服的效果。

用CSS做到這一點

為了在CSS中近似這種效果，我們需要創建大量相同的元素，使它們成為半透明的，并將它們的動畫偏移一秒鐘。

首先，我們將使用CSS過渡為想要的動畫設置基礎。我們將使用一個簡單的黑點，然后將其分配給懸停時的變換（如果您在移動設備上，則點按）。我們還將為邊框半徑和顏色設置動畫，以顯示此方法的靈活性。

這是沒有運動模糊的基本動畫：

HTML：

<div class="container">
  Hover / Tap
  <div class="dot"></div>
</div>

.container {
        width: 300px;
        height: 100px;
        position: relative;
        margin: 100px auto;
        border-radius: 50px;
        border: 3px dotted #eee;
        text-align: center;
        font-family: sans-serif;
        padding-top: 10px;
      }

.dot {
        position: absolute;
        background: black;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transform: rotate(0deg);
        top: 25px;
        left: 25px;
        transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
      }

      .container:hover .dot {
        transform: rotate(360deg);
        border-radius: 0%;
        left: 225px;
        background: pink;
      }

效果圖：

現在，讓我們制作黑點的20個相同的副本，并將它們完全放置在具有絕對位置的完全相同的位置。每個副本的不透明度為10％，比數學上正確的數字略高一些，但是我發現我們需要使它們更加不透明以看起來足夠牢固。

下一步就是奇跡發生的地方。我們為點對象的每個克隆添加一個稍微增加的過渡延遲值。它們都將運行完全相同的動畫，但是它們各自將偏移三毫秒。

HTML代碼：

<div class="container">
  Hover / Tap
          <div class="dot one"><br></div>
        <div class="dot two"><br></div>
        <div class="dot three"><br></div>
        <div class="dot four"><br></div>
        <div class="dot five"><br></div>
        <div class="dot six"><br></div>
        <div class="dot seven"><br></div>
        <div class="dot eight"><br></div>
        <div class="dot nine"><br></div>
        <div class="dot ten"><br></div>
        <div class="dot eleven"><br></div>
        <div class="dot twelve"><br></div>
        <div class="dot thirteen"><br></div>
        <div class="dot fourteen"><br></div>
        <div class="dot fifteen"><br></div>
        <div class="dot sixteen"><br></div>
        <div class="dot seventeen"><br></div>
        <div class="dot eighteen"><br></div>
        <div class="dot nineteen"><br></div>
        <div class="dot twenty"><br></div>
</div>

CSS代碼：

.container {
        width: 300px;
        height: 100px;
        position: relative;
        margin: 100px auto;
        border-radius: 50px;
        border: 3px dotted #eee;
        text-align: center;
        font-family: sans-serif;
        padding-top: 10px;
      }

.dot {
        position: absolute;
        background: black;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transform: rotate(0deg);
        top: 25px;
        left: 25px;
        opacity: 0.1;
        transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;
      }

      .container:hover .dot {
        transform: rotate(360deg);
        border-radius: 0%;
        left: 225px;
        background: pink;
      }

.dot.two {
        transition-delay: 3ms;
      }
      .dot.three {
        transition-delay: 6ms;
      }
      .dot.four {
        transition-delay: 9ms;
      }
      .dot.five {
        transition-delay: 11ms;
      }
      .dot.six {
        transition-delay: 14ms;
      }
      .dot.seven {
        transition-delay: 17ms;
      }
      .dot.eight {
        transition-delay: 20ms;
      }
      .dot.nine {
        transition-delay: 23ms;
      }
      .dot.ten {
        transition-delay: 26ms;
      }
      .dot.eleven {
        transition-delay: 29ms;
      }
      .dot.twelve {
        transition-delay: 32ms;
      }
      .dot.thirteen {
        transition-delay: 35ms;
      }
      .dot.fourteen {
        transition-delay: 38ms;
      }
      .dot.fifteen {
        transition-delay: 41ms;
      }
      .dot.sixteen {
        transition-delay: 44ms;
      }
      .dot.seventeen {
        transition-delay: 47ms;
      }
      .dot.eighteen {
        transition-delay: 50ms;
      }
      .dot.nineteen {
        transition-delay: 53ms;
      }
      .dot.twenty {
        transition-delay: 56ms;
      }

效果圖：

這種方法的優點在于，它創建了適用于大量不同動畫的偽運動模糊效果。我們可以在那里進行顏色更改，縮放過渡，奇數定時，并且運動模糊效果仍然有效。

使用20個對象克隆可用于大量快速動畫和慢速動畫，但是使用較少的克隆仍可以產生合理的運動模糊感。您可能需要調整克隆對象的數量，它們的不透明度以及過渡延遲的數量，以使用您的特定動畫。我們剛剛看過的演示具有稍微超乎想象的模糊效果，使其更加突出。

最終，隨著計算機功能的發展，我希望某些主要的瀏覽器可能會開始在本地提供這種效果。然后，我們就可以消除擁有20個相同對象的荒謬之處。同時，這是一種逼真的逼真的運動模糊的合理方法。

lass和 ID 選擇器

• 我們之前給一個段落中添加斜體的標識的時候我們會在CSS里面這樣做，這次我們將學習使用ID選擇器來實現這項功能

• 我們在之前的代碼中給標簽添加id

 <p id="author">
          <strong>勞拉·瓊斯 (Laura Jones)</strong> 于 2027 年 6 月 21
          日星期一發布
        </p>

• CSS代碼是這樣的，相信你能明白這是什么意思，相當于給這個段落起名字一樣

#author {
  font-style: italic;
  font-size: 18px;
}

相同的道理，我們給版權信息也用這種方法去寫；如下所示：

    <footer><p id="copyright">版權所有 ? 2027 sbz</p></footer>

類選擇器

• 除了id選擇器，還有類選擇器。那么這兩個選擇器有什么區別呢？id選擇器不允許id名字有相同的，而類選擇器可以多種元素使用同一個這樣的選擇器。
• 舉個例子，我們現在將下方的幾個作者添加同樣的類選擇器

        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去學習網頁開發</a>
          <p class="related-author">作者：喬納斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龍</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">為什么 JavaScript 很棒</a>
          <p class="related-author">作者：瑪蒂爾達</p>
        </li>

在CSS上，我們這樣寫

.related-author {
  font-size: 18px;
  font-weight: bold;
}

• 如上圖所示，這些無序列表的黑點看上去實在難看，如何將它去除呢？如下

ul {
  list-style: none;
}

但是如果html中有多個無序列表，這個時候我們就需要使用類選擇器去做這件事情了

HTML代碼如下：

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去學習網頁開發</a>
          <p class="related-author">作者：喬納斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龍</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">為什么 JavaScript 很棒</a>
          <p class="related-author">作者：瑪蒂爾達</p>
        </li>
      </ul>

CSS代碼如下：

.related {
  list-style: none;
}

• 疑問：為啥上面的不用id選擇器，而是用class呢？
• 因為當我們不止一個元素需要使用CSS樣式的時候，我們通常都會選擇類選擇器

注：在實際的生活中，我們都會使用類選擇器，因為在id選擇器只能使用一次，如果你后續使用同樣的css樣式會增加你的代碼量，所以即使是一個CSS，也建議使用類選擇器，而不是id選擇器。