纯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(正方 ...
随机推荐
- [系统]no such partition
电脑系统是win8.1+ubuntu14.2,为了卸载ubuntu,安装CentOS,于是在win8.1下把ubuntu的分区给删除了,重启,出现no such partition grub resc ...
- 查看APK包名签名等信息
有些游戏第三方比如分享需要配置游戏包名和签名,不同渠道包名签名又不同,所以时常需要查看不同apk包等签名信息,之前是使用等微博开放平台的手机客户端查看apk签名,前提是知道包名,网上找了下查看签名和包 ...
- 扩增子图表解读3热图:差异菌、OTU及功能
热图是使用颜色来展示数值矩阵的图形.通常还会结合行.列的聚类分析,以表达实验数据多方面的结果. 热图在生物学领域应用广泛,尤其在高通量测序的结果展示中很流行,如样品-基因表达,样品-OTU相对丰度矩 ...
- Python 之mysql类封装
import pymysql class MysqlHelper(object): conn = None def __init__(self, host, username, password, d ...
- 【特 性】Attribute
1 AttributeUsage [AttributeUsageAttribute(AttributeTargets.All, AllowMultiple = true, Inherited = tr ...
- Array的内置方法思维导图整理(JavaScript)
按照MDN整理的数组部分的思维导图,主要目的是方便查漏补缺,所以写的不是很详细.
- Git 基础教程 之 搭建Git服务器
截图自: 廖雪峰老师官方网站 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0 ...
- 搭建 Seafile 专属网盘
准备域名 任务时间:15min ~ 20min 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频. 视频 - 在腾讯云上购买域名 域名解析 域名购买完成后, 需要将域名解析到实验 ...
- TortoiseGit配置密钥的方法
TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.使用命令ssh-keygen -C "邮箱地址" -t rsa产生的密钥在Tortoi ...
- 【[Offer收割]编程练习赛14 C】可疑的记录
[题目链接]:http://hihocoder.com/problemset/problem/1507 [题意] [题解] 如果多出来一个的话; 某个人的父亲节点就会变成两个 找到有两个父亲节点的人就 ...