纯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(正方 ...
随机推荐
- JavaScript的基础数据类型和表达式
Java Script的基础数据类型和表达式 基本的数据类型: number(数值)类型:可分为整数和浮点数 string(字符)类型:是用单引号“'”或者双引号“"”来说明的. boole ...
- JS监听事件错误:Uncaught TypeError: xx(函数名)is not a function at HTMLInputElement.onclick
事件监听一直出错,提示已定义的函数名不是一个函数,折腾了好久才想到,原来是函数名和JS内部关键字重名造成的. 以前也遇到过这种情况,但因为发生的概率比较小,就没太在意,但是这次感觉这方面确实需要注意, ...
- HDU_Reward_拓扑排序
Reward Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- Android中Webview使用经验总结
很早前就喜欢在Android中使用Webview组件结合JS来做应用,总结了一些不错的小经验,在这里持续更新,自己备忘,也希望给其他需要的同学一些参考- 1.添加权限 要用Webview,确认你在** ...
- jquery 实现 单选框点击取消
<label for="1" class="z-label"> <input type="radio" class=&qu ...
- map集合遍历,放入id
背景,需要从电脑导入excel表格到网页上然后表格中公司需要对应数据库的id 通过key-value方法来对应id Office office = new Office();office.setG00 ...
- 【LeetCode】4、Median of Two Sorted Arrays
题目等级:Hard 题目描述: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find t ...
- CSS 选择器 知识点
<html> <head> <style type="text/css"> h1 > strong { /*子元素选择器 只选择自己 的子 ...
- mongodb数据库的导出与导入
数据库的导出 导出类型为json,数据库:mapdb,集合:bike 字段:bikeId,lat,lng,current_time,source ,条件为source字段为ofo第一条数据 mongo ...
- detecting locked tables mysql (locked by LOCK TABLE)
detecting locked tables mysql (locked by LOCK TABLE) up vote15down votefavorite 7 I would like to kn ...