纯CSS 实现关闭图标 icon
本文介绍关闭 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的更多相关文章
- 一步步打造自己的纯CSS单标签图标库
图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...
- 纯css实现网络图标
<html> <head> <title>css图标</title> <meta charset="utf-8"> &l ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
- 纯CSS制作网页图标
三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 手把手教你打造一个纯CSS图标库
来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- 摘记 史上最强大的40多个纯CSS绘制的图形(一)
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
随机推荐
- Python语言之模块
模块基本上就是一个包含了所有你定义的函数和变量的文件.它用处在于使你你能在别的程序中重用它提供的功能和服务. 1.模块的使用方法 模块的文件名必须以.py作为扩展名. 当我们需要使用某个模块时,我们需 ...
- JAVA中EXTENDS 与 IMPLEMENT 区别
简单说: 1.extends是继承父类,只要那个类不是声明为final或者那个类定义为abstract的就能继承,2.JAVA中不支持多重继承,但是可以用接口来实现,这样就要用到implements, ...
- 扩增子图表解读1箱线图:Alpha多样性
箱线图 箱形图(Box-plot)又称为盒须图.盒式图或箱线图,是一种用作显示一组数据分散情况资料的统计图.因形状如箱子而得名.在宏基因组领域,常用于展示样品组中各样品Alpha多样性的分布 第一种情 ...
- 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确.).为了能够查看在线演示效果,你需要有一个兼容WebGL ...
- 查询数据表行数 然后循环查找表 添加数据到ITEMS
;i<tbBiao.Rows.Count;i++) { string TableName = (tbBiao.Rows[i]["Table"]).ToString(); tb ...
- S3C2440时钟体系
注:以下内容学习于韦东山老师arm裸机第一期视频教程 一. 2440时钟简介 1.1 2440是一个SOC(system on chip)系统,不仅有很多CPU,还有很多外设,在2440芯片手册有系统 ...
- zabbix--TCP状态监控
Tcp的连接状态对于我们web服务器来说是至关重要的,尤其是并发量ESTAB:或者是syn_recv值,假如这个值比较大的话我们可以认为是不是受到了攻击(例如SYN攻击),或是是time_wait值比 ...
- 洛谷——P1196 [NOI2002]银河英雄传说
P1196 [NOI2002]银河英雄传说 题目大意: 给你一个序列,支持两种操作: 合并指令为$M_{i,j}$j,含义为第i号战舰所在的整个战舰队列,作为一个整体(头在前尾在后)接至第j号战舰所 ...
- ES6 基础学习
ECMAScript 6 标准入门 一.let和const let命令 let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效:是块级作用域,且let不允许 ...
- 取代PHP原生函数的一些扩展包
前言 虽然程序员无时无刻都在造轮子,但造轮子也有效率之分,用好轮子才能造出好"