CSS燈光閃爍效果是一種常見的動畫效果,常常用于網站中的宣傳頁或產品介紹頁,可以為網站增加一份動感和互動性。
/* 定義燈光閃爍動畫 */ @keyframes light { 0% { background-color: #fff; /* 初始狀態為白色 */ } 50% { background-color: #FBB90F; /* 閃爍顏色 */ } 100% { background-color: #fff; /* 恢復成白色 */ } } /* 定義閃爍的燈光 */ .light { width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: light 1s infinite; /* 無限循環動畫 */ }
代碼中首先定義了一個燈光閃爍的動畫,通過@keyframes關鍵字來定義動畫的各個狀態。動畫分為三個狀態:初始狀態為白色,50%為閃爍狀態,顏色定義為#FBB90F,100%時恢復成白色。
接下來定義閃爍的燈光,定義了該元素的寬度、高度、圓角、位置等屬性,并且將動畫的名稱應用于該元素的animation屬性中。同時,定義動畫循環次數為無限循環。
/* 頁面上使用燈光閃爍效果 */
在HTML頁面中通過添加一個div元素并應用上述樣式類即可實現燈光閃爍的效果。
總之,CSS燈光閃爍效果可以幫助我們增加網站的動感和互動性,為網站帶來更好的用戶體驗。