發光邊框是一種CSS動畫效果,適用于網頁中需要突出顯示內容的場合。下面是一段實現發光邊框動畫的CSS代碼:
.box { border: 2px solid transparent; border-radius: 10px; position: relative; overflow: hidden; } .box:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: -1; animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 1; } 50% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(0.95); opacity: 1; } }
代碼中,.box是一個具有2像素透明邊框和10像素圓角的HTML元素。.box:before是該元素的偽元素,用于實現發光邊框動畫。通過設置它的白色背景色和-z-index,使得它被.box元素遮蓋,并且只能在邊框內部顯示。
使用@keyframes關鍵字定義pulse動畫,實現邊框從內向外呼吸燈效果。其中0%時設置邊框縮小并且不透明度為1,50%時恢復原來大小并且不透明度為0.5,100%時回到原來狀態。通過animation屬性將pulse動畫應用于.box:before偽元素上,設置持續時間1秒和緩動效果為ease-in-out,并且設置無限循環。
上一篇mysql 獲取序列值
下一篇叉用css怎么寫