css-对号/叉号(纯css)

对号、叉号

<span class="yes"></span>
<span class="close"></span>

/*对号*/
.yes{position:relative;
}
.yes::before{content:'',
position:absolute;
width:10px;
height:18px;
color:green;
border-bottom:1px solid;
border-right:1px solid;
left:20%;
top:30%;
transform-origin:center;
transform:translate(-50%,-30%) rorate(45dge);
}/*叉号*/
.close{position:realtive;
}
.close::before,.close::after{content:'',
position:absolute;
background-color:red;
left:16px;
width:1px;
height:18px;
top:10px;
}
.close::before{transform:rorate(45deg);
}
.close::afer{transform:rorate(-45deg);
}

css-对号/叉号(纯css)相关推荐

[css] 能不能使用纯css使你的浏览器卡死？怎么实现？
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放！
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
你不知道的CSS妙用，纯CSS实现炫酷照片墙
演示地址:https://www.albertyy.com/2020/6/photo.html 原始效果: 鼠标经过效果: 鼠标点击效果: 代码: <!DOCTYPE html> < ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...

css-对号/叉号(纯css)

css-对号/叉号(纯css)相关推荐

最新文章

热门文章