16个实用的CSS样式之发光图标

1,834 阅读5分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

👨‍🎓作者简介:一位喜欢写作,计科专业大三菜鸟

🏡个人主页:starry陆离

🕒首发日期:2022年9月14日星期三

🌌上期文章:16个实用的CSS样式之翻转卡片

📚订阅专栏:『16个实用的CSS样式』

1.简介

对于初学前端的小白来说css样式的设计很考验基本功和创意想法,而在项目开发中我们不可能将大部分的时间用于CSS代码的编写,能复用的就复用。因此我特意总结了16个在项目开发中常用的CSS样式,因为自己也是初学者,所以以小白的视角来记录和学习这16款样式的设计与编写。今天我为大家带来的是发光图标

来看一下最终效果吧!!!

css004

2.工具介绍

在开发之前我们先来介绍一个网站,Font Awesome 中文网 – | 字体图标。不知在这之前你做开发设计时是否也困于找不到规范统一的图标呢,这个网站便为我们构建了一个丰富的图标库,这让我们可以通过一行代码引入此库。

image-20220914160153139

要使用Font Awesome图标也很简单,只需要在HTML页面的部分中添加以下行:

 <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

将图标库引入后我们就可以做简单的使用啦,首先这里有分享一个提高开发效率的小技巧

css004_1

图标的使用也极其简单就是通过fa前缀,和图标名就可以使用啦。图标名不要记,要用到的时候到官方库去找就可以了。图标库 – Font Awesome 中文网

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
     <link rel="stylesheet" href="style.css"/>
     <title>社交按钮分享hover发光特效</title>
   </head>
   <body>
     
     <main>
       <ul>
         <li>
           <a href=""><i class="fa fa-weixin"></i></a>
         </li>
         <li>
           <a href=""><i class="fa fa-weibo"></i></a>
         </li>
         <li>
           <a href=""><i class="fa fa-github"></i></a>
         </li>
         <li>
           <a href=""><i class="fa fa-linkedin"></i></a>
         </li>
         <li>
           <a href=""><i class="fa fa-windows"></i></a>
         </li>
         <li>
           <a href=""><i class="fa fa-xing"></i></a>
         </li>
       </ul>
       
     </main>
   </body>
 </html>
 ​

因为还没有添加css样式,我们的网页是这副模样。

image-20220914170019339

3.样式美化

3.1基本样式

这里我们学习一下盒子模型

CSS 盒子模型的默认定义里,你对一个元素所设置的 widthheight 只会应用到这个元素的内容区。如果这个元素有任何的 borderpadding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

  • content-box 是默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。

演示:box-sizing - CSS(层叠样式表) | MDN (mozilla.org)

备注: 对于新的 web 站点,你可能希望首先将 box-sizing 设置为 border-box,如下所示:

 * { box-sizing: border-box; }

这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。

3.2flex排列

为了能使图标居中显示,我们可以采用flex弹性布局。弹性布局是一个极其灵活的布局,属性很多,就不在这里展开讲解,可详看此篇文章的讲解》弹性布局(display:flex;)属性详解

 main {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100vh;
   position: relative;
   background: #2c3a47;
   z-index: 25;
 }
 ​
 ul {
   display: flex;
 }
 ​
 ul li {
   margin: 0 18px;
 }
 ​
 li a {
   position: relative;
   display: block;
   color: white;
   width: 64px;
   height: 64px;
   font-size: 36px;
   text-align: center;
   line-height: 66px;
   border-radius: 50%;
   background: #2c3a47;
   transition: 0.6s;
 }

设置好后,我们可以看到此时图标已经居中显示。接下来我们只要添加hover属性,让鼠标移上去后发光即可。

image-20220914173824063

3.3hover发光

hover发光其实就是给相应的元素加上颜色阴影。这里我为了美化效果,通过伪元素还给a标签加上一个圆形的背景层叠效果,同样也加上了颜色阴影,代码如下:

 li a:hover {
   text-shadow: 0 0 4px #25ccf7;
 }
 ​
 li a::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   border-radius: 50%;
   background: #25ccf7;
   transition: 0.6s;
   transform: scale(0.8);
   z-index: -1;
 }
 ​
 li a:hover::before {
   box-shadow: 0 0 14px 2px #25ccf7;
   transform: scale(1.05);
 }

css004_2

4.结语

到此为止一个简单的发光图标就做好啦,当然在常见的网站中不会这样去配色哈,还是要简约大气为主。但是学习阶段好看就完事了。如果觉得不错的话记得点赞支持哈。