小tip:CSS计数器+伪类实现数值动态计算与呈现【转】
【原文】http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/
一、CSS计数器为哪样?
要想理解本文内容,你需要首先了解什么是CSS计数器,您可以查看前不久我写的文章“CSS计数器(序列数字字符自动递增)详解”,相当地详尽与深入。
下面的动态行为全部由HTML与CSS触发,没有任何JavaScript的参与,不过使用诸多CSS3功能,因此只在现代浏览器中有效果。OK,放下手中的工作,一起来感受下CSS的潜力吧~
二、CSS计数器与动态计数呈现
您可以狠狠地点击这里:使用CSS计数器动态获得选中元素个数demo
demo中的复选框,你选中几个,就是告诉你对应选中的个数,如下截图,本人土鳖,只吃过3种:
CSS代码很简单,如下:
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
解释下就是,有个全局计数器icecream
,每有一个复选框选中,计数值就会加1
, .total
就是呈现选中个数的那个标签,其任务很简单,呈现当前计数器值就可以了。
三、CSS计数器与数值计算小游戏
您可以狠狠地点击这里:CSS计数器实现数值计算小游戏demo
默认进入看到是这样样子:
选择对应的计算值后面就会呈现对应的结果:
当最后计算的值是72
时候,就会反馈你成功了!
其实现主要借助CSS3选择器以及CSS计数器以及单复选框伪类技术。
CSS核心代码如下:
body {
counter-reset: sum;
} input {
position: absolute;
clip: rect(0 0 0 0);
} #number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; } .sum::before {
content: '= ' counter(sum);
} #number1:checked ~
#number2:checked ~
#number3:not(:checked) ~
#number4:not(:checked) ~
#number5:not(:checked) ~
#number6:checked ~
.sum::after {
content: ' (万岁!)';
}
其实原理跟上面的计算选中个数是一样的,不过这里呢,每个复选框计数值这里都是具体值(不是默认的1
),最后,通过相邻兄弟选择器以及:checked
状态判断最后结果是不是72
,还是挺巧妙的。
大家有兴趣可以多多斟酌斟酌。
参考文章
(本篇完)
小tip:CSS计数器+伪类实现数值动态计算与呈现【转】的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
随机推荐
- charles安装破解步骤
访问该地址https://www.zzzmode.com/mytools/charles/ 安装——生成破解工具charles.jar——替换
- css的引用关系
总结:离div标签越近,越先被引用 先在同级目录下新建一个stylesheet(是以.css结尾的)注意:link引入进来的css中,class标签也是c1,因为html中div class=c1,因 ...
- [极客大挑战 2019]Havefun wp
很少见的很简单的一道题 查看源代码 获得一段被注释的代码 直接?cat=dog即可得flag
- 吴恩达《深度学习》-第五门课 序列模型(Sequence Models)-第一周 循环序列模型(Recurrent Neural Networks) -课程笔记
第一周 循环序列模型(Recurrent Neural Networks) 1.1 为什么选择序列模型?(Why Sequence Models?) 1.2 数学符号(Notation) 这个输入数据 ...
- xml的复习
xml的复习 1.概念:可扩展标记语言 2.功能: *存储数据 1.配置文件 2.在网络中传播 3.xml与html区别: xml语法严格,HTML语法松散 xml存储数据,HTML展示 ...
- Spring学习(二)--Spring的IOC
1.依赖反转模式 依赖反转:高层次的模块不应该依赖于低层次的模块,两者都应该依赖于抽象接口.抽象接口不应该依赖于具体实现.而具体实现则应该依赖于抽象接口. 在面向对象编程领域中,依赖反转原则(Depe ...
- STM32CubeMX HAL库串口: 使用DMA数据发送、使用DMA不定长度数据接收
转载自 https://blog.csdn.net/euxnijuoh/article/details/81638676
- .net Winform 揭开语音识别的神秘面纱
今天老哥弄上位机,了解到一个有意思的东西,就是语音识别,真的很简单,话不多话,一起看图吧 1. 初始 Winform 界面设计: 2.潦潦几句代码书写着我的理解: 2-1. 先看引用 dll usi ...
- kubernetes1.15极速部署prometheus和grafana
关于prometheus和grafana prometheus负责监控数据采集,grafana负责展示,下图来自官网: 环境信息 硬件:三台CentOS 7.7服务器 kubernetes:1.15 ...
- sort函数居然能改变元素值?记一次有趣的Bug——四数之和
坐标leetcode: 我想都不想直接深度优先搜索暴力求解: class Solution { public: vector<vector<int>> res; //答案 in ...