本文介绍关闭 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. day05-控制流程之if/while/for

    目录 控制流程之if判断 控制流程之while循环 控制流程之for循环 控制流程之if判断 if 其实就是根据条件来做出不同的反应,如果这样就这样干,如果那样就那样干 1. 如果:成绩 > 9 ...

  2. php base64互转pdf

    /* * base64转pdf */ function base642pdf($formTxt,$toPdf) { $file = file_get_contents($formTxt);//读 $d ...

  3. mysql cpu 100% 满 优化方案 解决MySQL CPU占用100%的经验总结

    下面是一些经验 供参考 解决MySQL CPU占用100%的经验总结 - karl_han的专栏 - CSDN博客 https://blog.csdn.net/karl_han/article/det ...

  4. adjtimex修改tick值用法举例

    测试 用户态下内核时钟计数间隔,默认都是100HZ.因此单个tick代表了10^4 us. 可以设置每个tick代表的时钟长度,因此把tick增加1(即增加为10001us)的影响是每天时间快8.64 ...

  5. 破解js中的this指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  6. Spring 注解注入的几种方式(转)

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...

  7. 基于vue的nuxt框架cnode社区服务端渲染

    nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub ...

  8. Vue源码学习(二)——生命周期

    官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMo ...

  9. 初识 Dubbo

    Dubbo 官网架构图 0:服务容器负责启动,加载运行服务提供者 1:服务提供者在启动时,向注册中心注册自己提供的服务 2:服务消费者在启动时,想注册中心订阅自己所需的服务 3:注册中心返回服务提供者 ...

  10. JavaSE 学习笔记之StringBuilder(十六)

    < java.lang >-- StringBuilder字符串缓冲区:★★★☆ JDK1.5出现StringBuiler:构造一个其中不带字符的字符串生成器,初始容量为 16 个字符.该 ...