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图标变色变亮---------------->