現在的網站設計多樣化,為了使網站更加生動、豐富,經常需要添加一些特效。本文介紹一種使用CSS3實現的彩燈閃爍效果。
首先,在HTML文件中定義需要添加特效的元素,比如一個div元素。再在CSS文件中定義該元素的樣式,其中要使用animation屬性來添加動畫效果。樣式代碼如下:
.deng{ width: 100px; height: 100px; background-color:#F39800; position: relative; } .deng:before{ content: ""; position: absolute; width: 30px; height: 30px; background-color: #FFF; border-radius: 100%; top: 10px; left: 10px; box-shadow: 0 0 20px #FFC107,-20px 0 20px #FFC107,20px 0 20px #FFC107; animation: light 2s ease infinite alternate; } .deng:after{ content: ""; position: absolute; width: 30px; height: 30px; background-color: #FFF; border-radius: 100%; top: 10px; right: 10px; box-shadow: 0 0 20px #FFC107,-20px 0 20px #FFC107,20px 0 20px #FFC107; animation: light 2s ease infinite; } @keyframes light{ from { opacity: 0; } to{ opacity: 1; } }
上述代碼中使用了:before和:after偽元素來分別代表彩燈的左端和右端。通過box-shadow屬性添加陰影效果實現光亮效果,在animation屬性中使用keyframes來定義動畫效果——從透明度為0到透明度為1的變化。最后,在HTML文件中引入該CSS文件即可。
本文介紹了一種使用CSS3實現的彩燈閃爍效果,這種效果可以增強網頁的視覺效果,進一步豐富網站的設計。實現過程簡單,可以通過以上代碼示例來嘗試實現。希望該內容對您有所幫助,謝謝!
上一篇css3實現垂直居中
下一篇css3實現心碎的動畫