CSS的一個很酷的效果就是圖片光暈效果了，這種效果能夠讓我們的圖片變得更加生動，充滿了動態感。接下來，我將向大家展示如何通過CSS來實現圖片光暈效果。
.shadow {
position: relative;
display: inline-block;
}
.shadow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0.6) 80%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
opacity: 0;
}
.shadow:hover::after {
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.3s ease-in-out;
}首先，我們要在CSS中為我們的圖片添加一個相對定位（position: relative）和一個類名（class="shadow"），并且將它們包含在一個
標簽中。隨著這個
標簽的hover事件的觸發，我們通過:before 或者 :after 偽元素來添加我們的圖片光暈效果。
在我們的代碼中，:after 偽元素被用于實現圖片光暈效果。我們將其設置為絕對定位，并且在圖片的中心點上使其和圖片重合。我們使用了Radial Gradient（徑向漸變）來實現光暈效果，我們使用了rgba顏色（注意后三個數字為透明度），并且將其分別設置為60%和80%的透明度，使它們呈現出漸變的效果。
其中width: 0; height: 0;和border-radius: 50%用于將圓形光暈初始化為一個點，opacity:0表示它是隱藏的。而在:hover事件觸發時，我們通過將width和height設置為100%來使光暈填充整個圖片，并且將透明度改為1，使其顯示出來。同時，我們還添加了一個過渡效果（transition），使其更加平滑。
最后，您可以按照以上代碼自己嘗試創建圖片光暈效果。如果您懂得一些CSS編程，那么這將很容易地實現。祝你好運！
上一篇css 圖片充滿body
下一篇css 圖片中心點縮放