CSS相機閃光燈是一種常見的網頁設計元素,它可以通過CSS實現類似閃光燈的效果,為頁面增加一些動感和互動性。
.flash { position: relative; background-color: white; width: 100px; height: 100px; border-radius: 50%; } .flash:before { content: ""; position: absolute; top: -10px; left: -10px; z-index: -1; width: 120%; height: 120%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); transition: transform 0.3s ease-out; } .flash:hover:before { transform: scale(1); }
代碼中采用了一個圓形元素作為閃光燈的樣式基礎,設置了它的樣式屬性如寬度、高度、邊框圓角等。然后通過:before偽類在圓形元素的周圍加上了一個放大且半透明的白色元素,實現了閃光的效果。在:hover狀態下使閃光元素的transform屬性值從scale(0)變為scale(1),即從隱藏狀態變為顯示狀態,從而實現了鼠標懸浮時的閃光效果。
上一篇css鼠標移開過渡生硬
下一篇css鼠標突然不變色