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实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...
随机推荐
- 自定义蜘蛛网图 NetView
概述 写论文忙里偷闲写了一个蜘蛛网图的自定义view,支持多重属性 有图才能有真相,下面先上图 主要支持网格颜色.tag文本.覆盖区域颜色.透明度的属性改变,具体使用可以参见我的githubgithu ...
- Java核心技术第四章——1.封装性
封装性(有时称为数据隐藏): 实现封装的关键在于绝对不能让类中的方法直接地访问其他类的实例域值.程序仅通过对象的方法与对象的数据进行交互. 给对象赋予了"黑盒"的特征,提高了重用性 ...
- c# 获取TFS结构 文件
#region 获取最新版本 /// <summary> /// 获取最新版本 /// </summary> /// <param name="server_u ...
- java 如何使的float保留2位或者多位小数 (转载)
转载自 http://blog.csdn.net/com_stu_zhang/article/details/7214565 方法1: float f = 34.232323; Big ...
- Msys+MinGW编译VLC
说明:本文只是对官方文档进行简单的翻译总结,旨在帮助一些英文不太好的朋友.官方文档请见wiki.videolan.org/Win32CompileMSYSNew. Msys是MinGW的一个辅助工 ...
- 手机号 验证函数 C++
直接上代码 #include <regex> bool IsValidPhoneNumber(const std::string& strPhone) { std::regex ...
- DUEditor的诞生
书接上回线上项目py2升级py3的事,除了上篇blog说到的snspy,主要升级的一个包就是DjangoUeditor,由于这个项目的维护人也不维护了,最后所幸自己开了支持Py3且加了一定优化的新版本 ...
- Jenkins实现Android自动化打包
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/77102359 本文出自[赵彦军的博客] 1.Tomcat 进入 https://t ...
- Stack和Vector源码分析
Stack和Vector源码分析 Stack和Vector源码分析stack源码分析1.Stack是什么2.Stack的结构图3.Stack继承关系4.Stack的主要方法5.Stack源码Vecto ...
- 利用Python脚本悄无声息的遥控室友电脑开机密码!
整蛊一下室友就行了,切勿用于非法用途! 利用python脚本控制室友windows系统电脑的开机密码.利用random()生成随机数(密码),天知地知,密码只有你自己知道! Python代码分为cli ...