本文介绍关闭 icon 的实现。具体如下

1.html部分

<span id="close"></span>

2.css部分

    #close {
display: inline-block;
width: 30px;
height: 4px;
background: #333;
transform: rotate(45deg);
} #close::after {
content: '';
display: block;
width: 30px;
height: 4px;
background: #333;
transform: rotate(-90deg);
}

效果如图:

就是这样,是不是很简单呢。

纯CSS 实现关闭图标 icon的更多相关文章

  1. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  2. 纯css实现网络图标

    <html> <head> <title>css图标</title> <meta charset="utf-8"> &l ...

  3. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  4. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  5. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  7. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  8. amazeui学习笔记--css(常用组件6)--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  9. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. JS中for循环多个变量的判断原理

    看完下面两个例子的比较就明白了,其实就是逗号表达式,总是依据最后一个表达式的值. for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j; consol ...

  2. PowerDesigner16逆向工程生成PDM列注释(My Sql5.0模版)

    一.编辑当前DataBase 选择DataBase——>edit Current DBMS...弹出如下对话框:  如上图,先解释一下: 根据红颜色框从上往下解释一下. 第一个红框是对应的修改的 ...

  3. (ccf)201703-3markdown

    #include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...

  4. 第一节:初识pandas之Series(上)

    Series线性的数据结构, 也是一个一维数组. 声明:本人Python小白,以下代码只是个人学习的过程,仅仅记录一下学习的点点滴滴,若有错误,还望指正. (注:该代码均在jupyter notebo ...

  5. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  6. sicily 10330. Cutting Sausages

    #include<stdio.h> int main() {    int n,m,j,k;    while(scanf("%d%d",&n,&m)! ...

  7. POJ - 3538 - Domestic Networks

    先上题目: Domestic Networks Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 732   Accepted: ...

  8. [POJ2104] 区间第k大数 [区间第k大数,可持久化线段树模板题]

    可持久化线段树模板题. #include <iostream> #include <algorithm> #include <cstdio> #include &l ...

  9. hdu_1863_畅通工程_201403122000

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  10. 51Nod——T 1113 矩阵快速幂

    https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1113 基准时间限制:3 秒 空间限制:131072 KB 分值: 40 ...