本文介绍关闭 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. [Windows Server 2003] 安装SQL Server 2005

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装SQL S ...

  2. easyui 使用笔记

    http://www.easyui.info/archives/1435.html datagrid 服务端分页 服务端分页,高效,快捷!强力推荐! easyui的datagrid服务端分页,通过设置 ...

  3. 【技术累积】【线】【java】【2】AOP

    思维导图 基础概念 翻译:面向切面编程,或面向方面编程: 是OOP的重要补充: 切面:传统的OOP构建的是对象之间的关系,是一种垂直的关系:假设,OOP程序是一个圆筒,那么与业务或逻辑无关的东西,比如 ...

  4. SSL协议提供的服务

    SSL协议提供的服务主要有: 1)认证用户和服务器,确保数据发送到正确的客户机和服务器: 2)加密数据以防止数据中途被窃取: 3)维护数据的完整性,确保数据在传输过程中不被改变.

  5. js 获取 checkbox[] 值

    $("#btnAdd1").click(function () { console.log($("form").serialize()); var checkb ...

  6. Java字符字符串类

    Java字符字符串类 Character 类 Character 类用于对单个字符进行操作.Character 类在对象中包装一个基本类型 char 的值在实际开发过程中,我们经常会遇到需要使用对象, ...

  7. Django - 基于orm实现用户增删改查

    1.基于orm实现用户新增 user_info.html中,增加代码: views.py中,在原user_info函数中,增加判断代码: 备注:最后一句,可以通过return redirect 实现, ...

  8. SDOI2018退役记

    在NOIp2017中,我意识到自己啥也不会.如今SDOI2018快来了,自己还是啥也不会.高一两次考试注定以打两次酱油告终.还是记录一下,到NOIp之后如果还没有退役的话,那这个博客可能还会继续更新吧 ...

  9. python中enumerate( )函数的使用

    enumerate( )函数是遍历一个序列中的元素以及元素对应的下标 seq = ['one', 'two', 'three'] for i, element in enumerate(seq): p ...

  10. Android MMS数据库存储说明

    数据表 MMS模块总共包含17张表:addr.android_metadata.attachments.canonical_addresses.drm.part.pdu.pending_msgs.ra ...