CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面
一 实例要达到的要求如图所示:
二 分析
1.7个圆角矩形标签(或按钮)
2. 点击触发并开始运算,最后一个标签显示结果
3.计算成功后弹出“万岁”字眼
三 代码实现
关键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: ' (万岁!)';
}
HTML代码:
<p><strong>选择下面的数值,使其计算结果为72:</strong></p>
<input type="checkbox" id="number1"><label for="number1">64</label>
<input type="checkbox" id="number2"><label for="number2">+16</label>
<input type="checkbox" id="number3"><label for="number3">-32</label>
<input type="checkbox" id="number4"><label for="number4">+128</label>
<input type="checkbox" id="number5"><label for="number5">+4</label>
<input type="checkbox" id="number6"><label for="number6">-8</label>
<strong class="sum"></strong>
CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面的更多相关文章
- JavaScript小游戏实例:统一着色
设计如下的简单小游戏. 在面板(画布)中放置10行10列共100个小方块,每个小方块随机在5种颜色中选一种颜色进行着色,在面板的下方,放置对应的5种颜色色块,如图1所示. 图1 “统一着色”游戏界面 ...
- JavaScript小游戏实例:简单的键盘练习
键盘是一种常用的输入设备,灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功.下面我们编写一个简单的键盘练习游戏. 1.刺破气泡交互式小动画 在编写简单的键盘练习游戏之前,先设计一个简单地刺破气 ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 小游戏专场:腾讯云Game-Tech技术沙龙上海站顺利落下帷幕
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 9月14日腾讯云GAME-TECH技术沙龙小游戏专场在上海顺利举办,此次技术沙龙由腾讯云的资深专家,以及 ...
- 聚焦小游戏技术生态,腾讯游戏云GAME-TECH落地厦门
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云 发表于云+社区专栏 2018迎来了小游戏元年,据<2018年小游戏行业白皮书>显示:2018年小游戏市场规模预 ...
- 【转】精选30个优秀的CSS技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 精选30个优秀的CSS技术和实例
精选30个优秀的CSS技术和实例 投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...
- css技术和实例
今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...
- 30个优秀的CSS技术和实例 By 彬Go 2008-12-04
在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...
随机推荐
- React Native Android开发环境配置
近些年,Web前端甚是火爆,火爆程度堪比我毕业时的移动端开发一般.随着JavaScript的火爆,移动端也不安分了起来,ReactNative就异军突起了,几乎要做到"一次学习,四处开发&q ...
- was上的应用程序部分启动的原因
最近几天为了方便联调,我把两个项目配置到was测试环境上,前几天还好好的,昨天忽然有一个项目反复安装后都呈现部分启动的状态,打开节点一看,偏偏没启动的那个节点就是我需要用的79节点. 这让我很郁闷,硬 ...
- Loader转换器
一.简介 webpack本身只能处理js模块,Loader可以理解为模块和资源的转换器,它本身是一个函数,接受文件作为参数,返回转换的结果.因此,我们就能通过require来加载任何类型的模块和文件. ...
- spring boot + quartz 集群
spring boot bean配置: @Configuration public class QuartzConfig { @Value("${quartz.scheduler.insta ...
- DB2 SQL Error: SQLCODE=-803, SQLSTATE=23505, SQLERRMC=2 (转载)
http://blog.csdn.net/xiyuan1999/article/details/5706230 DB2 SQL Error: SQLCODE=-803, SQLSTATE=23505, ...
- HttpContext未null处理
public static HttpContext Current { get { if (instance.Value == null) { instance = new ThreadLocal&l ...
- DDGScreenShot —图片加各种滤镜高逼格操作
写在前面 图片加各种滤镜操作,当然苹果给开发者提供了相关的api和封装, 大部分开发者感觉这是这是晦涩难懂的,接下来就让我们来了解一下, 其实也没有那么深不可测. 代码如下(每一步已经解释的很详细) ...
- 循环神经网络(RNN)--学习笔记
一.基本概念 RNN针对的数据是时序数据.RNN它解决了前馈神经网络,无法体现数据时序关系的缺点.在RNN网络中,不仅同一个隐含层的节点可以相互连接,同时隐含层的输入不仅来源于输入层的输入还包括了上一 ...
- SOFA 源码分析 — 调用方式
前言 SOFARPC 提供了多种调用方式满足不同的场景. 例如,同步阻塞调用:异步 future 调用,Callback 回调调用,Oneway 调用. 每种调用模式都有对应的场景.类似于单进程中的调 ...
- meta 刷新
<meta http-equiv="refresh" content="5;url=地址" /> 5秒后刷新至URL地址