參考譯文： CSS是網頁設計中不可或缺的一部分，因為它可以將網頁變得更加生動有趣。而100種CSS特效則是一個設計師大集合，其中包含各種各樣的CSS技巧，可以使你的網站充滿活力。下面介紹其中一些特效。 1.背景圖像的漸變 這種特效可以讓你在網頁背景中使用漸變圖像。這個效果可以通過以下代碼來實現： pre { background: url('bg.jpg') no-repeat; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } 2.圓圈餅狀圖 這種特效可以讓你創建一個圓圈餅狀圖。要實現這個效果，可以使用CSS偽元素和屬性，下面是代碼： code { position: relative; background: #fff; border-radius: 50%; } code::before { content: ''; position: absolute; top: 0; left: 0; background: #f8a600; border-radius: 50%; clip: rect(0, 50px, 100px, 0); transform: rotate(45deg); transform-origin: center; } 3.文字閃爍 文字閃爍是一種簡單但有效的特效，可以吸引更多的用戶關注。要使用這個效果，可以使用以下CSS代碼： a { text-decoration: none; color: #ddd; position: relative; } a:hover { color: #000; } a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; z-index: -1; transition: all 0.3s ease-in-out; } a:hover::before { opacity: 1; } 4.抖動動畫 這個特效可以讓你的網站看起來更有生氣。要實現這個效果，可以使用以下CSS代碼： blockquote { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform-origin: center center; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } 這只是100種CSS特效中的一小部分，但已經足以使你的網站變得更加生動，注重細節，顯示你的專業服務。