本文介绍关闭 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. C#——枚举格式转换与比较

    定义一个枚举类型: public enum City { 北京, 上海, 广州 } 控制台判断: static void Main(string[] args) { Console.WriteLine ...

  2. shell编程之grep命令的使用

    大家在学习正则表达式之前,首先要明确一点,并把它牢牢记在心里,那就是: 在linux中,通配符是由shell解释的,而正则表达式则是由命令解释的,不要把二者搞混了.切记!!! 通常有三种文本处理工具/ ...

  3. Java数组数据类型

    Java数组数据类型 数组是多个相同类型的数据的组合,数组中的元素可以是任何类型的数据: 一维数组 package com.ahabest.array; public class ArratTest ...

  4. 用shell编写dhcp自动获取脚本

    #!/bin/bash#net=$(ifconfig ens33 | awk -F'[ .]+' '/inet\>/{print $3"."$4"."$5 ...

  5. servlet之@PostConstruct,@PreDestroy

    1.@PostConstruct说明 被@PostConstruct修饰的方法会在服务器加载Servlet的时候运行,并且只会被服务器调用一次,类似于Serclet的inti()方法.被@PostCo ...

  6. js可以随意拖拽的div的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 如何区分null和undefined

    null和undefined是两种数据类型, 如果硬要区分的话. null是一种类型, 赋值变量为null型. 未定义的变量, 即为undefined. var a = null a // null ...

  8. Vue.js:使用vue-cli快速构建项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先安装了vue和webpack,不知道怎么安 ...

  9. Aggressive Cows 二分

    Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stalls are locat ...

  10. N天学习一个Linux命令之free

    用途 查看系统内存(物理/虚拟/缓存/共享)使用情况 用法 free [-b | -k | -m | -g | -h] [-o] [-s delay ] [-c count ] [-a] [-t] [ ...