css做计算器,CSS3 纯CSS计算器
CSS
语言:
CSSSCSS
确定
:root {
--step: 14px;
--bg: #666;
--color: #fff;
--color-scale: #fff;
--bg-scale: #111;
--bg-checked: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));
--bg-unchecked: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));
--color-checked: var(--bg);
--color-unchecked: var(--color);
}
#display {
width: calc(100% - 10px);
margin: 5px;
padding: 10px;
font-size: 2em;
font-family: monospace;
background: var(--bg);
white-space: pre;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
#display:before {
content: '=';
}
#display::after {
content: counter(result);
}
#modmultiply:checked ~ .grid {
--result: calc(var(--a) * var(--b));
}
#modadd:checked ~ .grid {
--result: calc(var(--a) + var(--b));
}
#modsubtract:checked ~ .grid {
--result: calc(var(--a) - var(--b));
}
#a0:checked ~ .grid {
--a: 0;
}
#b0:checked ~ .grid {
--b: 0;
}
#a1:checked ~ .grid {
--a: 1;
}
#b1:checked ~ .grid {
--b: 1;
}
#a2:checked ~ .grid {
--a: 2;
}
#b2:checked ~ .grid {
--b: 2;
}
#a3:checked ~ .grid {
--a: 3;
}
#b3:checked ~ .grid {
--b: 3;
}
#a4:checked ~ .grid {
--a: 4;
}
#b4:checked ~ .grid {
--b: 4;
}
#a5:checked ~ .grid {
--a: 5;
}
#b5:checked ~ .grid {
--b: 5;
}
#a6:checked ~ .grid {
--a: 6;
}
#b6:checked ~ .grid {
--b: 6;
}
#a7:checked ~ .grid {
--a: 7;
}
#b7:checked ~ .grid {
--b: 7;
}
#a8:checked ~ .grid {
--a: 8;
}
#b8:checked ~ .grid {
--b: 8;
}
#a9:checked ~ .grid {
--a: 9;
}
#b9:checked ~ .grid {
--b: 9;
}
#modmultiply:checked ~ .grid [for=modmultiply],
#modadd:checked ~ .grid [for=modadd],
#modsubtract:checked ~ .grid [for=modsubtract] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
input {
display: none;
}
#a0:checked ~ .grid [for=a0],
#b0:checked ~ .grid [for=b0] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a1:checked ~ .grid [for=a1],
#b1:checked ~ .grid [for=b1] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a2:checked ~ .grid [for=a2],
#b2:checked ~ .grid [for=b2] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a3:checked ~ .grid [for=a3],
#b3:checked ~ .grid [for=b3] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a4:checked ~ .grid [for=a4],
#b4:checked ~ .grid [for=b4] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a5:checked ~ .grid [for=a5],
#b5:checked ~ .grid [for=b5] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a6:checked ~ .grid [for=a6],
#b6:checked ~ .grid [for=b6] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a7:checked ~ .grid [for=a7],
#b7:checked ~ .grid [for=b7] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a8:checked ~ .grid [for=a8],
#b8:checked ~ .grid [for=b8] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
#a9:checked ~ .grid [for=a9],
#b9:checked ~ .grid [for=b9] {
--background: var(--bg-checked);
--color: var(--color-checked);
}
body {
margin: 0;
background: var(--bg);
color: var(--color);
font-family: sans-serif;
}
h1,
h2 {
width: 100%;
font-weight: lighter;
}
.grid > div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background: var(--color);
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 1;
-webkit-flex: 1 1 calc(100% / 3 - 10);
-ms-flex: 1 1 calc(100% / 3 - 10);
flex: 1 1 calc(100% / 3 - 10);
margin: 5px;
padding: 5px;
box-sizing: border-box;
}
label {
--background: var(--bg-unchecked);
--color: var(--color-unchecked);
color: var(--color);
height: 2em;
width: 2em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-flex: 1;
-webkit-flex: 1 1 calc(100% / 3 - 10px);
-ms-flex: 1 1 calc(100% / 3 - 10px);
flex: 1 1 calc(100% / 3 - 10px);
background-color: var(--bg);
background-image: var(--background);
box-shadow: inset 0 0 0 1px #222;
font-family: monospace;
font-size: 3em;
border-radius: 3px;
margin: 5px;
}
.grid {
counter-increment: result var(--result);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(var(--step) * 61);
margin: auto;
}
#a,
#b,
#mod {
-webkit-box-flex: 1;
-webkit-flex: 1 1 30%;
-ms-flex: 1 1 30%;
flex: 1 1 30%;
}
css做计算器,CSS3 纯CSS计算器相关推荐
- css做html5logo,用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: css部分代码如下: html, body, div, span, applet, object, iframe, ...
- css做html5logo,用纯css实现的html5logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: 源代码下载地址: css部分代码如下: html, body, div, span, applet, object, ...
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放!
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...
- html做微信logo,纯CSS实现一个微信logo,需要几个标签?_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...
- html怎么做一个正方形,纯 CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案 ...
- html css字幕滚动代码,纯CSS实现滚动3D字幕
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法.但我还是想使用HTML和CSS来实现这样的效果. 很多年以前,在Web上实现滚动文本的动画效果一般是采用marqu ...
- css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...
最新文章
- python3 多维数组 NumPy ndarray 简介
- 高考成绩等位分查询2021,等位分查询(等位分查询系统)
- java在程序中加入音频_在任意Java程序中播放音频
- ZOJ 2165 Red and Black
- 第三十七期:如果你这样回答“什么是线程安全”,面试官都会对你刮目相看
- 安装Vistual Studio 2005的小问题
- 对刚iPad!华为最强Pad发布,独揽四项全球第一,3299元起!
- 防止easyui的DataGride莫名其妙的选中最后一行或删除后编辑信息提示已有选中项的bug...
- C# Thread.Sleep 导致内存溢出,在多线程里Sleep的真实情况 软件闪退 内存溢出
- nosql第二章课后习题
- 深度剖析 C++ 对象池自动回收技术实现
- c语言中node是数据类型吗,lnode(数据结构lnode是什么类型)
- Threejs中文文档
- 我和计算机专业的故事
- 推荐一些stm32和DSP的学习视频和教程(资料)
- 在Windows平台上使用Git和pathogen管理gVim插件
- 几十年前的老旧照片如何修复?还不知道旧照片怎么恢复清晰吗?
- c语言报告反思,c语言教学的反思.pdf
- 微信开发安卓虚拟键盘挡住输入框的问题
- UART总线协议——esp32学习笔记