当前位置：首页 > article >正文

CSS画icon图标系列（一）

article 2024/11/8 19:51:53

前言：

一、向右箭头

1.原理：

2.代码实现

3.结果展示：

二、钟表

1.原理：

2.代码展示：

3.最终效果：

三、小手机

1.原理：

2.代码展示：

3.最后效果：

四、结束语

前言：

CSS是一种强大且灵活的样式语言，可以通过控制样式的各种属性来实现对网页的精确控制，使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标，灵活运用CSS中旋转，拉伸，扭曲裁剪，伪元素选择器，实现icon小图标，利用css来画小图标可以减少浏览器的请求，当然使用img标签或icon图标会大大提高我们开发的速度。

本节内容展示：

一、向右箭头

1.原理：

利用border属性，只添加相邻两个边框，使用transform属性进行旋转

2.代码实现

html代码：

<div class="right"></div>

css代码：

  .right {
           /* 设置盒子的宽和高 */
            width: 8px;
            height: 8px;
            /* 添加边框颜色，以及边框样式为实线*/
            border: #666 solid;
            /* 只添加上边框和右边框 ，下边框和左边框为0*/
            border-width: 2px 2px 0 0;
             /* 旋转45度 */
            transform: rotate(45deg);
        }

3.结果展示：

总结：同样的我们可以利用旋转，来实现其他方向的箭头，也可以给下边框以及有边框添加边框属性。

二、钟表

1.原理：

利用一个div盒子，以及他自身的伪元素属性，相当于拥有三个盒子，利用定位，圆角来实现一个钟表图标。

2.代码展示：

html:

<div class="clock"></div>

css:

  /* 钟表 */
        .clock {
            /* 主体盒子 */
            width: 24px;
            height: 24px;
            /* 添加宽高 */
            border: 1px solid rgb(250, 250, 250);
            /* 圆角为50%，就是圆形*/
            border-radius: 50%;
            /* 添加定位 */
            position: relative;
        }
        /* 利用伪元素 */
        .clock::after {
            /* 默认属性 */
            content: "";
            /* 转换为块级元素*/
            display: block;
            /* 定位：父相子绝*/
            position: absolute;
            /* 设置宽高*/
            width: 1px;
            height: 10px;
            /* 添加背景*/
            background: rgb(250, 250, 250);
              /* 相对于主体的位置*/
            top: 3px;
            left: 11px;
        }

        .clock::before {
            content: "";
            display: block;
            position: absolute;
             /* 设置宽高*/
            width: 1px;
            height: 6px;
             /* 设置背景*/
            background: rgb(250, 250, 250);
             /* 旋转作为时针*/
            transform: rotate(45deg);
             /* 相对于主体的位置 */
            top: 12px;
            left: 9px;
        }

3.最终效果：

三、小手机

1.原理：

利用border属性，添加不同的边框宽度实现。

2.代码展示：

html:

<div class="money">￥</div>

css:

   /* money图标 */
        .money {
            /* 利用flex布局让其垂直水平居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 去除字体默认样式 */
            font-style: normal;
            /* 设置宽高 */
            width: 15px;
            height: 24px;
            /* 添加边框 实线 */
            border: rgb(250, 250, 250) solid;
            /* 上右左2px  下3px*/
            border-width: 2px 2px 3px 2px;
            /* 添加圆角属性 */
            border-radius: 3px;
        }