CSS3 燈泡特效是實現網頁動畫效果的一個重要手段。它可以讓網頁更加生動,增加用戶對網站的好感度,同時也為網站設計師提供了更加豐富的設計思路。
/*CSS3 燈泡特效樣式代碼*/ .bulb { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #fff; box-shadow: inset 2px 2px 5px rgba(255,255,255,0.3), inset -2px -2px 5px rgba(0,0,0,0.2), 2px 2px 10px rgba(0,0,0,0.2), -2px -2px 10px rgba(255,255,255,0.3); animation: flicker 0.5s infinite; } .bulb:before { content: ""; position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; border-radius: 50%; background: #f1c40f; box-shadow: inset 2px 2px 5px rgba(255,255,255,0.3), inset -2px -2px 5px rgba(0,0,0,0.2), 2px 2px 10px rgba(0,0,0,0.2), -2px -2px 10px rgba(255,255,255,0.3); transform: rotate(-60deg); animation: flicker 0.5s infinite alternate; } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
在上面的代碼中,我們定義了燈泡的樣式和動畫效果。首先,我們使用 border-radius 屬性來設置燈泡的外形為圓形,并且設置了背景色、投影等效果來營造出真實的燈泡效果。其次,我們使用 :before 偽元素為燈泡添加了一個黃色的小球,用于表示燈絲的位置。最后,我們使用 @keyframes 定義了 flicker 動畫,來模擬燈泡閃爍的效果。
通過上述代碼,我們可以輕松地實現一個美觀、生動的 CSS3 燈泡特效,為網站的設計增色不少。