效果图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘</title><link href="../css/keyboard.css" rel="stylesheet" type="text/css">
</head>
<body><div><span><i>a</i></span><span><i>s</i></span><span><i>d</i></span><span><i>f</i></span></br><span><i>z</i></span><span><i>x</i></span><span><i>c</i></span><span><i>v</i></span></br><span></span></div>
</body>
</html>

CSS代码

*{margin:0;padding:0;box-sizing: border-box;font-family: Consolas,sans-serif;
}
body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #232323;
}span{position: relative;display: inline-block;width: 80px;height: 80px;padding: 8px 15px;margin: 8px 4px;border-radius: 10px;background:linear-gradient(180deg,#282828,#202020);box-shadow: inset -8px 0 8px rgba(0,0,0,0.15),inset 0 -8px 8px rgba(0,0,0,0.25),0 0 0 2px rgba(0,0,0,0.75),10px 20px 25px rgba(0,0,0,0.4);overflow: hidden;
}
span:last-child{width: 100%;
}
span::before{content: '';position: absolute;top:3px;left:4px;bottom:14px;right:12px;background: linear-gradient(90deg,#232323,#4a4a4a);border-radius: 10px;box-shadow: -10px -10px 10px rgba(255,255,255,0.5),10px 5px 10px rgba(0,0,0,0.15);border-left: 1px solid #0004;border-bottom:1px solid #0004;border-top: 1px solid #0009;
}
span i{position: relative;color:#fff;font-style:normal;font-size: 1.5rem;text-transform: uppercase;
}

每日一个CSS——模拟键盘相关推荐

每日一个css效果之css sprites
为什么要是用css sprites CSS Sprites are the preferred method for reducing the number of image requests. Co ...
每日一个css小技巧 6/10 水平垂直居中
行内元素水平垂直居中 1 常规设置一句话总结: text-align设置水平居中,line-height = height 设置垂直居中 2 父盒子模拟为表格块级元素水平垂直居中 1 positi ...
Cypress之模拟键盘鼠标操作以及页面元素拖动操作
上篇文章讲解了使用cypress框架时,如何上传或者下载文件,以及定位操作iframe和shadow dom下的页面元素.此次课程将讲解如何模拟键盘输入.鼠标操作以及如何拖动页面元素,另外,会介绍如何 ...
[转载]C#模拟键盘鼠标事件-SendKeys
C#模拟键盘鼠标事件-SendKeys 2007-09-18 15:138596人阅读评论(1)收藏举报 1.模拟键盘事件 System.Windows.Forms.SendKeys以下是 Sen ...
C/C++使用keybd_event模拟键盘按键
1 #include <stdio.h> 2 #include <Windows.h> 3 4 /* 5 设置键盘大小写状态 6 big:为TRUE则切换大写状态,否则切换小写 ...
php虚拟键盘输入,[问题] bash下如何模拟键盘输入
你的位置: 问答吧 -> Shell -> 问题详情 [问题] bash下如何模拟键盘输入我想要在bash下模拟键盘输入. 现在有两个实例. 1. 如果我在使用未配置sudo nopas ...
在ＶＣ中实现模拟键盘，输入内容并显示在ＬｉｓｔＢｏｘ中。
网上找的,还没试过,希望对楼主有帮助模拟键盘按键自动输入文字键盘对于每个操作电脑的人员来说是最熟悉不过的了.键盘上的按键可分为两类: 按下后会在电脑的输入窗口上出现对应字符的按键,如字母键和数字 ...
python3模拟键盘输入_Python模拟键盘输入
使用pynput库达到模拟键盘输入的目的(也可以进行鼠标模拟). 1.安装pynput库 pip install pynput 2.引入键盘所需类 from pynput.keyboard impor ...
python调用linux软键盘_在Linux中使用Python模拟键盘按键
之前在做自动化测试中需要用Python在linux中模拟Ctrl+V 进行路径粘贴,试了很多种方法,起初用了xerox和pyperclip这两个python库,但打开对话框后调用粘贴API无法进行粘贴 ...

每日一个CSS——模拟键盘

效果图

HTML代码

CSS代码

每日一个CSS——模拟键盘相关推荐

最新文章

热门文章