SVG图标悬停后美化
HTML代码:
<!-------------卡片下面的小图标组----------------><div class="row row-cols-1 row-cols-md-4 mt-5">
<div class="col"> <i id="github-icon" class="fab fa-github" data-toggle="modal" data-target="#svg001"></i> </div>
<div class="col"> <i id="github-icon" class="fab fa-microsoft"></i> </div>
<div class="col"> <i id="github-icon" class="fas fa-alien"></i> </div>
<div class="col"> <i id="github-icon" class="fas fa-comments-alt"></i> </div>
</div> <!-------------卡片下面的小图标组---------------->
CSS代码:
<!-------------让SVG图标变色变亮---------------->
<style>
#github-icon {
color: #279CB6; /*--- SVG图标默认颜色 --*/
font-size: 50px;
transition: color 0.5s ease, text-shadow 0.5s ease;
}
#github-icon:hover {
color: #03e9f4; /*--- 悬停后SVG图标颜色 --*/
text-shadow: 0 0 20px rgba(3, 233, 244, 0.3), 0 0 30px rgba(3, 233, 244, 0.3), 0 0 40px rgba(3, 233, 244, 0.3), 0 0 50px rgba(3, 233, 244, 0.3), 0 0 60px rgba(3, 233, 244, 0.3), 0 0 70px rgba(3, 233, 244, 0.3); /*--- 外发光比阴影更刺眼明亮 --*/
}
</style>
<!-------------让SVG图标变色变亮---------------->