纯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(正方 ...
随机推荐
- 仿iphone动态萤火虫锁屏应用安卓源码
该源码是仿iphone动态萤火虫锁屏应用源码,源码SkyLock,这也是最近弄了一款锁屏,苦于市场百般阻拦与锁屏应用数量实在太多,于是将它拿出来开源:废话不多说,希望大家能够希望,更多说明请看下面的吧 ...
- Python语言之模块
模块基本上就是一个包含了所有你定义的函数和变量的文件.它用处在于使你你能在别的程序中重用它提供的功能和服务. 1.模块的使用方法 模块的文件名必须以.py作为扩展名. 当我们需要使用某个模块时,我们需 ...
- (转)postgis常用函数介绍(二)
http://blog.csdn.net/gisshixisheng/article/details/47903151 概述: 书接上文,本文继续讲解Postgres中常用的空间函数的使用. 常用函数 ...
- mysql_数据查询_嵌套查询
嵌套查询 一个SELECT-FROM-WHERE语句称为一个查询块. 嵌套查询:将一个查询块嵌套在另一个查询块的WHERE子句或者HAVING短语的条件中的查询. 注:子查询的SELECT语句中不能使 ...
- SQL一对多取子表最新记录的所有字段(ROW_NUMBER()OVER()函数的应用)
ROW_NUMBER()OVER() 参数1:分组字段 PARTITION BY ..,..,.... 可选 参数2:排序字段 ORDER BY .. DESC 必须 实例: 根据Confir ...
- exgcd扩展欧几里得求解的个数
知识储备 扩展欧几里得定理 欧几里得定理 (未掌握的话请移步[扩展欧几里得]) 正题 设存在ax+by=gcd(a,b),求x,y.我们已经知道了用扩欧求解的方法是递归,终止条件是x==1,y==0: ...
- Entertainment Box Gym100781E(数据结构+贪心)
Entertainment Box 题意: 有n个节目,每个节目给出开始时间(st)和结束时间(en): 有k个内存条这k个内存条可以同时存储节目.如果节目j的开始时间stj 大于等于节目i的结束时 ...
- input chrome下输入之后背景变为黄色的解决办法
之所以Input输入之后背景原因色变为可恶的黄色,是因为在chrome 下input加上了input:-webkit-autofill这个属性,里面写的就是这个问题出现的原因 代码就是:input:- ...
- Python面向对象----继承, 重载
1. 面向对象三大特性之继承. 继承的便捷是子类可以直接调用父类里面的方法和属性.(在强类型语言里面是只能调用公有成员), 不用重复的造轮子. 减少程序猿的负担.实现多态等上层结构 2. 父类代码 3 ...
- Beetl学习总结(2)——基本用法
2.1. 安装 如果使用maven,使用如下坐标 <dependency> <groupId>com.ibeetl</groupId> <artifactId ...