本文介绍关闭 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. 数据结构应用实例#栈&单链表#简易计算器

    修改BUG的时候一不小心BUG越修越多,鉴于维护程序并不是学习数据结构的初衷,我已经果断的弃坑了!! 以下内容再不更新,Github上的代码直接无法正常编译运行.... 参考参考就好,学习到栈的作用就 ...

  2. CNN-CV识别简史2012-2017:从 AlexNet、ResNet 到 Mask RCNN

    原文:计算机视觉识别简史:从 AlexNet.ResNet 到 Mask RCNN 总是找不到原文,标记一下.        一切从这里开始:现代物体识别随着ConvNets的发展而发展,这一切始于2 ...

  3. python读取单个文件操作

    python读取单个文件,参考<笨方法学python>的第15节. 运行方式是采用:python python文件名 要读取的文件名 代码中 script, filename = argv ...

  4. linux安装mysql可视化工具MySQL-workbench 连接数据库 执行sql

    Step1:建立数据库连接 点击新建连接的按钮,符号是“+”的按钮,出现下图,在“Connection name”输入连接名称. 填写连接信息 输入数据库连接密码 测试连接: 再次点击连接时会要求输入 ...

  5. css流光效果

    css流光效果1: <!DOCTYPE html> <html> <head> <title>ww</title> </head> ...

  6. @FunctionalInterface

    >> 函数式接口也称为SAM接口 Single Abstract Method interfaces 接口有且仅有一个抽象方法 允许定义静态方法 允许定义默认方法 允许java.lang. ...

  7. kernel中的函数指针

    经常会看到这类的结构体: 这个结构体中 有几个函数指针, 这种方式的好处,可以有多种具体的函数实现,但是,这样就统一了接口 struct address_space_operations { int ...

  8. c/c++排坑(5) -- c语言中的申明

    C语言的申明总是令人头大,对于这块内容也一直让我头疼.希望通过这篇博客能够稍微梳理一下.材料和例子来源于<C专家编程> 一.C语言的申明的优先级规则 先来个例子,看看下面这行C代码到底是个 ...

  9. Capture the Flag ZOJ - 3879(模拟题)

    In computer security, Capture the Flag (CTF) is a computer security competition. CTF contests are us ...

  10. JS练习:表格全选与全不选

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...