CSS3的功能日新月異,光影閃動是其中之一。光影閃動是通過CSS3的漸變功能以及動畫屬性實現的,其效果可以讓網頁看起來更加生動、動感。
.box { width: 100px; height: 100px; background-color: #fff; border-radius: 50px; background: linear-gradient(to right bottom, #fc3, #f67); animation: shine 2.5s infinite; } @keyframes shine { 0% { opacity: 0.6; box-shadow: 0 0 0 0 #fc3; } 50% { opacity: 0.9; box-shadow: 0 0 0 50px #fc3; } 100% { opacity: 0.6; box-shadow: 0 0 0 0 #fc3; } }
代碼中,我們首先定義了一個類名為.box的元素,用到了漸變和圓角邊框屬性。接著,通過animation來定義了一個名為shine的關鍵幀動畫,動畫時間為2.5秒,無限循環。
在關鍵幀動畫中,我們通過opacity屬性調整了元素的不透明度,使得元素從半透明到不透明再到半透明的過程中,讓人感覺到閃耀的光芒。同時,設置了box-shadow屬性,通過改變陰影的大小和顏色,來形成類似流光的效果。這兩個屬性的變化,在關鍵幀動畫中分別設置了不同的起始和結束值。
通過這樣一個簡單的CSS3動畫,我們就可以讓網頁中的元素變得更加動感和生動,吸引更多用戶的目光。
上一篇css3 圖片灰度
下一篇php curl下載文件