CSS3懸掛擺動是一種很酷炫的效果,通過使用CSS3的transition和animation屬性,我們可以輕松實現這種效果。
.hanging { position: relative; display: inline-block; transform-origin: bottom; animation: swing 2s infinite ease-in-out; } @keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }
在上述代碼中,我們先給懸掛的元素設定一個相對定位,并且將transform-origin屬性設置為bottom,這樣一來我們就可以使元素以底部為基準進行擺動。
接著,我們使用@keyframes規則定義了一個名為swing的動畫,并且將其賦給了animation屬性。在swing中,我們定義了三個關鍵幀,分別是0%、50%和100%。這些關鍵幀中定義了元素旋轉的角度,從而實現了擺動的效果。
CSS3懸掛擺動的實現并不復雜,只需要簡單的幾行CSS代碼就可以了。如果你想要讓你的網頁更加生動有趣,那么可以考慮使用這種效果來為你的頁面增添一些情趣。