CSS实现迷你键盘
最近做了一个迷你键盘的dome，这里分享给大家
代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>迷你键盘</title>
<style>
*{margin:0;padding:0;list-style-type:none;} .keyboard {
display: grid;
grid-template-columns: repeat(30, 1.9vw);
grid-template-rows: repeat(5, 4.75vw);
grid-gap: 0.95vw;
background: #c2ccdb;
padding: 1.727272727272727vw;
border-radius: 1.266666666666667vw;
background: #d8dee8;
box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
}
.keyboard .key {
border-radius: 0.76vw;
grid-column: auto/span 2;
width: 100%;
height: 100%;
padding: 0.475vw;
font-size: 1.9vw;
display: grid;
align-items: center;
color: #8a94a4;
justify-content: center;
cursor: pointer;
background: #d8dee8;
box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
user-select: none;
}
.keyboard .key:hover,.keyboard .key.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
color: #fff;
text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
}
.keyboard .key.dotted {
position: relative;
}
.keyboard .key.dotted::before {
content: '_';
font-weight: bold;
color: #b5c0d2;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.keyboard .key.esc {
background: #ed4c67;
color: #fbdbe1;
}
.keyboard .key.esc:hover,
.keyboard .key.esc.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;
color: #fff;
text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
}
.keyboard .key.back {
background: #d63031;
color: #f7d6d6;
}
.keyboard .key.back:hover,
.keyboard .key.back.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #e57c7d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #991e1f;
color: #fff;
text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
}
.keyboard .key.shift {
background: #1e90ff;
color: #d2e9ff;
}
.keyboard .key.shift:hover,
.keyboard .key.shift.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;
color: #fff;
text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
}
.keyboard .key.control {
background: #be2edd;
color: #f2d5f8;
}
.keyboard .key.control:hover,
.keyboard .key.control.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;
color: #fff;
text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
}
.keyboard .key.win {
background: #f7b731;
color: #fdf1d6;
}
.keyboard .key.win:hover,
.keyboard .key.win.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;
color: #fff;
text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
}
.keyboard .key.alt {
background: #5352ed;
color: #dddcfb;
}
.keyboard .key.alt:hover,
.keyboard .key.alt.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;
color: #fff;
text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
}
.keyboard .key.fn {
background: #26de81;
color: #d4f8e6;
}
.keyboard .key.fn:hover,
.keyboard .key.fn.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;
color: #fff;
text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
}
.keyboard .key.cap {
background: #ee5a24;
color: #fcded3;
position: relative;
}
.keyboard .key.cap:hover,.keyboard .key.cap.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;
color: #fff;
text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
}
.keyboard .key.cap::before {
content: '';
position: absolute;
width: 0.5vw;
height: 0.5vw;
background: #f6ac91;
top: 1vw;
right: 1vw;
border-radius: 50%;
}
.keyboard .key.cap.on::before {
background: #fbded3;
box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
}
.keyboard .key.tab {
background: #12cbc4;
color: #cafaf8;
}
.keyboard .key.tab:hover,
.keyboard .key.tab.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;
color: #fff;
text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
}
.keyboard .key.enter {
background: #fdcb6e;
color: #fff5e2;
}
.keyboard .key.enter:hover,
.keyboard .key.enter.pressed {
transform: perspective(300px) scale(0.97);
box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #fba403;
color: #fff;
text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
}
.keyboard .key.s2 {
font-size: 1.727272727272727vw;
grid-column: auto/span 2;
}
.keyboard .key.s3 {
font-size: 1.727272727272727vw;
grid-column: auto/span 3;
}
.keyboard .key.s4 {
font-size: 1.727272727272727vw;
grid-column: auto/span 4;
}
.keyboard .key.s5 {
font-size: 1.727272727272727vw;
grid-column: auto/span 5;
}
.keyboard .key.s6 {
font-size: 1.727272727272727vw;
grid-column: auto/span 6;
}
.keyboard .key.s12 {
font-size: 1.727272727272727vw;
grid-column: auto/span 12;
}
.keyboard .key[on-shift] {
font-size: 1.461538461538461vw;
justify-items: center;
}
.keyboard .key[on-shift]::before {
content: attr(on-shift);
align-items: end;
}
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Sen', sans-serif;
min-height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: radial-gradient(circle at top left, #d8dee8 30%, #c2ccdb);
}
</style>
</head>
<body> <div class="keyboard">
<div class="key s2 esc" data-key=""></div>
<div class="key" on-shift="!" data-key="1">1</div>
<div class="key" on-shift="@" data-key="2">2</div>
<div class="key" on-shift="#" data-key="3">3</div>
<div class="key" on-shift="$" data-key="4">4</div>
<div class="key" on-shift="%" data-key="5">5</div>
<div class="key" on-shift="^" data-key="6">6</div>
<div class="key" on-shift="&" data-key="7">7</div>
<div class="key" on-shift="*" data-key="8">8</div>
<div class="key" on-shift="(" data-key="9">9</div>
<div class="key" on-shift=")" data-key="0">0</div>
<div class="key sub" on-shift="_" data-key="-">-</div>
<div class="key add" on-shift="+" data-key="=">=</div>
<div class="key s4 back" data-key=""></div>
<div class="key s3 tab" data-key=""></div>
<div class="key" data-key="Q">Q</div>
<div class="key" data-key="W">W</div>
<div class="key" data-key="E">E</div>
<div class="key" data-key="R">R</div>
<div class="key" data-key="T">T</div>
<div class="key" data-key="Y">Y</div>
<div class="key" data-key="U">U</div>
<div class="key" data-key="I">I</div>
<div class="key" data-key="O">O</div>
<div class="key" data-key="P">P</div>
<div class="key openbracket" on-shift="{" data-key="[">[</div>
<div class="key closebracket" on-shift="}" data-key="]">]</div>
<div class="key s3 pipe" on-shift="|" data-key="\">\</div>
<div class="key s4 cap" data-key=""></div>
<div class="key" data-key="A">A</div>
<div class="key" data-key="S">S</div>
<div class="key" data-key="D">D</div>
<div class="key dotted" data-key="F">F</div>
<div class="key" data-key="G">G</div>
<div class="key" data-key="H">H</div>
<div class="key dotted" data-key="J">J</div>
<div class="key" data-key="K">K</div>
<div class="key" data-key="L">L</div>
<div class="key semi" on-shift=":" data-key=";">;</div>
<div class="key comma" on-shift=""" data-key=",">,</div>
<div class="key s4 enter" data-key=""></div>
<div class="key s5 shift" data-key=""></div>
<div class="key" data-key="Z">Z</div>
<div class="key" data-key="X">X</div>
<div class="key" data-key="C">C</div>
<div class="key" data-key="V">V</div>
<div class="key" data-key="B">B</div>
<div class="key" data-key="N">N</div>
<div class="key" data-key="M">M</div>
<div class="key openangular" on-shift="<" data-key=",">,</div>
<div class="key closeangular" on-shift=">" data-key=".">.</div>
<div class="key slash" on-shift="?" data-key="">/</div>
<div class="key s5 shift up" data-key=""></div>
<div class="key s3 control" data-key=""></div>
<div class="key s3 win" data-key="CSS实现迷你键盘的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- RocketMQ源码分析 broker启动，commitlog、consumequeue、indexfile、MappedFileQueue、MappedFile之间的关系以及位置说明
目录 1.MappedFile类属性说明 1.1.MappedFile类属性如下 1.2.MappedFile构造器说明 2.MappedFileQueue类说明 2.1.属性说明 2.2.Mappe ...
- 单机编排之Docker Compose
当在宿主机启动较多的容器时候,如果都是手动操作会觉得比较麻烦而且容器出错,这个时候推荐使用docker 单机编排工具docker compose,Docker Compose 是docker容器的一种 ...
- python k-means聚类实例
port sys reload(sys) sys.setdefaultencoding('utf-8') import matplotlib.pyplot as plt import numpy as ...
- 【Windows系统常用命令集合】
查看建立的TCP连接:netstat -n 查看建立的TCP连接的进程:netstat -nb 查看本机侦听的端口: netstat -an (说明:如果端口没有侦听 检查服务) 测试到远程计算机的某 ...
- （六）、mkdir--创建目录make directory
一.命令详解与命令格式 在文件系统中创建新的目录, 格式:mkdir [-选项] 目录名 目录名既可以是相对路径名,也可是相对路径名 选项: -p或者--parent,创建指定路径中所有不存在 ...
- Redis基础篇（五）AOF与RDB比较和选择策略
RDB和AOF对比 关于RDB和AOF的优缺点,官网上面也给了比较详细的说明redis.io/topics/pers- RDB 优点: RDB快照是一个压缩过的非常紧凑的文件,保存着某个时间点的数据集 ...
- 嵌入式Linux-Bmp转jpeg
代码: /**************************************************************************** Ãû³Æ£º jpeg.c ¹ŠÄÜ ...
- JS中var与let的区别
区别: var声明的变量,其作用域在该语句所在的函数之内,存在着变量提升的现象. let声明的变量,其作用域为该句所在的代码块内,不存在变量提升的问题. let相比于var,其不允许在相同作用域内,重 ...
- 二本非科班，秋招，实习，面试，offer之路
不知不觉已经工作一年多的,我是2019年7月毕业的,但是如果算上实习就工作差不多两年了的吧. 最近不是刚刚过了圣诞节吗?然后又准备到元旦了,迎来2021年!在微信公众号上看到小部分公众号在总结2020 ...
- —用python写图片格式批量处理工具
python爬取微博评论(无重复数据) 前言 一.整体思路 二.获取微博地址 1.获取ajax地址 2.解析页面中的微博地址 3.获取指定用户微博地址 三.获取主评论 四.获取子评论 1.解析子评论 ...