纯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(正方 ...
随机推荐
- Cesium学习笔记(五):3D 模型 (http://blog.csdn.net/umgsoil/article/details/74572877)
Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加 还记得我们在实体添加的时候添 ...
- 批量obj格式直接转gltf
在cesium中的模型需要的是gltf或glb格式的文件,之前的做法是用将模型从3d max中导出dae格式的文件(需要插件),然后用collada2gltf工具将dae格式转成gltf. 最近翻看c ...
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- colgroup 整行变色
<table border="2" width="100%"> <colgroup span="2" align=&quo ...
- CF17E Palisection (回文自动机+DP)
题目传送门 题目大意:给你一个字符串,让你求出有多少对相交的回文子串 啊啊啊啊降智了,我怎么又忘了正难则反! 求相交会很难搞.把问题转化成求互不相交的回文子串再减一下就行了 先利用$PAM$求出以每个 ...
- Cent os常见操作命令
1.查看防火墙状态:firewall-cmd –-state 2.关闭防火墙:systemctl stop firewalld.service 3.禁止防火墙开机启动:systemctl disabl ...
- Pycharm 的基本操作
下载:https://www.jetbrains.com/pycharm/ 安装:随意安装在那个目录都可以 注册:可以采用 激活码 或者激活服务器,并对应在选项下面填入激活码或者激活服务器URL即可. ...
- noip模拟赛 计数
[问题描述] 给出m个数a[1],a[2],…,a[m] 求1~n中有多少数不是a[1],a[2],…,a[m]的倍数. [输入] 输入文件名为count.in. 第一行,包含两个整数:n,m 第二行 ...
- Likecloud-吃、吃、吃(洛谷 1508)
题目背景 问世间,青春期为何物? 答曰:“甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!” 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日上课,正当他饿得头昏 ...
- 洛谷 P1491 集合位置
P1491 集合位置 题目描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的 ...