demo: https://??shiroi.netlify.??app/gallery/glowing-menu-buttons/dist/
簡(jiǎn)略效果如圖
深色背景下還是很奈斯伪节!記錄一下,否則會(huì)忘仇奶;
應(yīng)用到的css屬性
- box-shadow 屬性说搅,生成多層重疊效果;
- transition屬性,漸變效果
代碼
很簡(jiǎn)單袄秩,做個(gè)示例噪生,由于需要多層shadow裆赵,所以我們的dom最好脫離文本流; 當(dāng)hover目標(biāo)元素是就會(huì)觸發(fā)box-shadow展開;
<div class="spot">1111</div>
.spot{
position:absolute;
transition: 0.5s;
&:hover{
box-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 0 20px rgba(255, 255, 255, 0.05), 0 0 0 40px rgba(255, 255, 255, 0.05), 0 0 0 60px rgba(255, 255, 255, 0.05), 0 0 0 80px rgba(255, 255, 255, 0.05), 0 0 0 100px rgba(255, 255, 255, 0.05)
}
}
.spot的長寬高和具體定位就不寫了跺嗽,主要就是利用box-shadow來實(shí)現(xiàn)~