分享一个有意思的键盘，我们就只会ctrl c+v

最新推荐文章于 2024-09-10 21:01:34 发布
最新推荐文章于 2024-09-10 21:01:34 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： CSS 文章标签： 计算机外设 c语言 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241329/article/details/130439958
版权

先上效果图：
在这里插入图片描述
再上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        :root {
            --hue: 0;
            --sat: 0%;
            --bg: hsl(var(--hue),var(--sat),90%);
            --fg: hsl(var(--hue),var(--sat),10%);
            --trans-dur: 0.3s;
            font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
        }
        body,
        button {
            color: var(--fg);
            font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
        }
        body {
            background-color: var(--bg);
            background-image: linear-gradient(-45deg,hsla(var(--hue),var(--sat),0%,0),hsla(var(--hue),var(--sat),0%,0.3));
            display: flex;
            height: 100vh;
            transition:
                    background-color var(--trans-dur),
                    color var(--trans-dur);
        }
        .keyboard,
        .keyboard:before,
        .keyboard:after {
            transition:
                    background-color var(--trans-dur),
                    box-shadow var(--trans-dur);
        }
        .keyboard,
        .keyboard__key-lines {
            display: flex;
        }
        .keyboard {
            background-color: hsl(var(--hue),var(--sat),80%);
            background-image: linear-gradient(90deg,hsla(var(--hue),var(--sat),10%,0.4),hsla(var(--hue),var(--sat),10%,0));
            border-radius: 0.75em;
            box-shadow:
                    -0.5em -0.5em 0.75em hsla(0,0%,0%,0.6),
                    0 0 0 1px hsl(var(--hue),var(--sat),67%) inset;
            align-items: center;
            margin: auto;
            padding: 0.375em;
            position: relative;
            width: 18.5em;
            height: 6.5em;
        }
        .keyboard:before,
        .keyboard:after {
            background-color: hsl(var(--hue),var(--sat),90%);
            content: "";
            display: block;
            position: absolute;
            bottom: 100%;
        }
        .keyboard:before {
            box-shadow:
                    -0.5em -0.5em 0.75em hsla(0,0%,0%,0.6),
                    0.25em 0 0.25em hsla(var(--hue),var(--sat),10%,0.2) inset,
                    0.25em -1.25em 0.5em hsla(var(--hue),var(--sat),10%,0.5) inset;
            left: calc(50% - 0.5em);
            width: 1em;
            height: 40em;
        }
        .keyboard:after {
            border-radius: 0.25em 0.25em 0 0;
            box-shadow: 0.375em -0.25em 0.5em hsla(var(--hue),var(--sat),10%,0.5) inset;
            left: calc(50% - 0.75em);
            width: 1.5em;
            height: 1.25em;
        }
        .keyboard__cmd {
            display: block;
            width: 1em;
            height: 1em;
        }
        .keyboard__key {
            background-color: hsl(var(--hue),var(--sat),95%);
            border-radius: 0.5em;
            box-shadow:
                    -0.4em -0.25em 0.25em hsla(0,0%,0%,0.25),
                    0 0 0 0.1em hsla(0,0%,0%,0.3),
                    0.04em 0.04em 0.04em hsla(0,0%,0%,0.4) inset,
                    -0.1em -0.1em 0.04em hsla(0,0%,100%,0.8) inset;
            color: hsl(var(--hue),var(--sat),50%);
            margin: 0 0.375em;
            outline: transparent;
            padding: 0.75em;
            position: relative;
            width: 5em;
            height: 5em;
            transition:
                    background-color var(--trans-dur),
                    box-shadow 0.15s,
                    color var(--trans-dur);
            -webkit-appearance: none;
            appearance: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .keyboard__key--meta {
            width: 5.5em;
        }
        .keyboard__key:active,
        .keyboard__key.active {
            box-shadow:
                    0 0 0.2em hsla(0,0%,0%,0.2),
                    0 0 0 0.1em hsla(0,0%,0%,0.4),
                    0 -0.05em 0 hsla(0,0%,0%,0.6) inset,
                    -0.05em -0.15em 0.05em hsla(0,0%,100%,0.8) inset;
        }
        .keyboard__key-line {
            font-size: 2em;
            line-height: 1;
        }
        .keyboard__key-line--small {
            font-size: 0.875em;
        }
        .keyboard__key-line--tr {
            margin: 0 0 auto auto;
        }
        .keyboard__key-line--br {
            margin: auto 0 0 auto;
        }
        .keyboard__key-lines {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            transition: transform 0.15s;
        }
        .keyboard__key:active .keyboard__key-lines,
        .keyboard__key.active .keyboard__key-lines {
            transform: translateY(-1px);
        }
        .keyboard__key:before {
            box-shadow: 0 0 0 0.5em hsla(223,90%,50%,0);
            border-radius: 0.5em;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: box-shadow var(--trans-dur);
        }
        .keyboard__key:focus-visible:before {
            box-shadow: 0 0 0 0.5em hsla(223,90%,50%,0.5);
        }

        /* Dark theme */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: hsl(var(--hue),var(--sat),20%);
                --fg: hsl(var(--hue),var(--sat),90%);
            }
            .keyboard__key {
                background-color: hsl(var(--hue),var(--sat),15%);
                box-shadow:
                        -0.4em -0.25em 0.25em hsla(0,0%,0%,0.25),
                        0 0 0 0.1em hsla(0,0%,0%,0.3),
                        0.04em 0.04em 0.04em hsla(0,0%,0%,0.4) inset,
                        -0.1em -0.1em 0.04em hsla(0,0%,100%,0.05) inset;
                color: hsl(var(--hue),var(--sat),90%);
            }
            .keyboard__key:active,
            .keyboard__key.active {
                box-shadow:
                        0 0 0.2em hsla(0,0%,0%,0.2),
                        0 0 0 0.1em hsla(0,0%,0%,0.4),
                        0 -0.05em 0 hsla(0,0%,0%,0.4) inset,
                        -0.05em -0.15em 0.05em hsla(0,0%,100%,0.05) inset;
            }
        }
    </style>
</head>
<body>
<div class="keyboard">
    <button class="keyboard__key keyboard__key--meta" type="button" data-key="cmd">
		<span class="keyboard__key-lines">
			<svg class="keyboard__cmd keyboard__key-line--tr" viewBox="0 0 16 16" width="16px" height="16px" aria-hidden="true">
				<path fill="none" stroke="currentcolor" stroke-width="2" d="M5.7,10.3v2.3c0,1.3-1,2.3-2.3,2.3S1,14,1,12.7s1-2.3,2.3-2.3H5.7z M5.7,10.3h4.7 M5.7,10.3V5.7M10.3,10.3v2.3c0,1.3,1,2.3,2.3,2.3s2.3-1,2.3-2.3s-1-2.3-2.3-2.3H10.3z M10.3,10.3V5.7 M10.3,5.7H5.7 M10.3,5.7V3.3c0-1.3,1-2.3,2.3-2.3S15,2,15,3.3s-1,2.3-2.3,2.3H10.3z M5.7,5.7V3.3C5.7,2,4.6,1,3.3,1S1,2,1,3.3s1,2.3,2.3,2.3H5.7z" />
			</svg>
			<small class="keyboard__key-line keyboard__key-line--small keyboard__key-line--br">ctrl</small>
		</span>
    </button>
    <button class="keyboard__key" type="button" data-key="c">
		<span class="keyboard__key-lines">
			<span class="keyboard__key-line">C</span>
		</span>
    </button>
    <button class="keyboard__key" type="button" data-key="v">
		<span class="keyboard__key-lines">
			<span class="keyboard__key-line">V</span>
		</span>
    </button>
</div>
</body>
<script>
    window.addEventListener("DOMContentLoaded",() => {
        const c = new CopypasteKeyboard(".keyboard");
    });

    class CopypasteKeyboard {
        constructor(el) {
            this.el = document.querySelector(el);

            this.init();
        }
        get isMac() {
            return /(Mac|iP[ahno]+[de])/i.test(navigator.userAgent);
        }
        init() {
            window.addEventListener("keydown",this.keyAction.bind(this,true));
            window.addEventListener("keyup",this.keyAction.bind(this,false));
        }
        keyAction(down,e) {
            let { key } = e;
            const isCmd = key === "Meta" && this.isMac;
            const isCtrl = key === "Control" && !this.isMac;

            if (isCmd || isCtrl) key = "cmd";

            const keyEl = this.el?.querySelector(`[data-key="${key}"]`);
            const activeClass = "active";

            if (down === true) keyEl?.classList.add(activeClass);
            else keyEl?.classList.remove(activeClass);
        }
    }
</script>
</html>

使用方法按照键盘提示的来就行，有了这个键盘老板再也不用担心我会摸鱼了

timi先生
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
假设你的键盘只有以下键: A Ctrl + A Ctrl + C Ctrl + V
u013251692的博客
09-19 4636
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
eclipse里的一些快捷键
qq_45877149的博客
08-04 205
Create a new class. Alt + Shift + N, C 创建类属性 输入String name; 创建构造器　Generate constructor Alt + Shift + S, O，回车 创建getter/setter Generate Getters and Setters Alt + Shift + S, R , 空格 创建toString方法　Generate toString() method Alt + Shift + S, S, 回车 创建main函数 Create
初级程序员只会Ctrl + C + V
乖乖隆的灯博客
12-14 1340
可维护、可复用、可扩展 面向对象: 封装、继承、多态  → 降低程序耦合 业务封装 业务与界面分离
获取键盘码
qq_32077521的博客
10-21 252
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> </head>...
mac os系统复制粘贴ctrl+c ctrl+v快捷键实现方式
beipanxian4526的博客
07-24 3215
平时用习惯了win系统，用mac os时，复制粘贴不习惯使用command+c command+v。那么怎么把mac os的系统设置成ctrl+c和ctrl+v呢？发现了一个快捷的方法：系统偏好设置--键盘--修饰键（右下角），将ctrl键和command键的功能对换一下即可。缺点：所有的command命令都由ctrl替换了，伤一发而动全身！按照如下配置方式的一直没有成功，重...
一套键鼠控制多台电脑
12-16
我可以在 MacBook 上CTRL+C拷贝一些文字，然后再移动回PC上按键盘CTRL+V粘贴，一切都是那么顺畅自然！非常有意思！ 写在后面： Synergy 真的是一款相当相当赞的软件！它能大大提高多电脑用户的工作效率，特别是频繁...
linux键盘IO探究和实验[基于哈工大操作系统实验]
Aurora极光城
12-19 2131
我们使用的键盘，看似非常简单自然，但是其功能的时间却相当有学问，本文将以哈工大操作系统IO设备实验为基础，讲解一下linux0.11下键盘功能的实现，和简单修改的方法。 一，实现原理 键盘功能主要由如下几个程序实现： keyboard.S     ： 大S，用c++规则 tty_io.c           ： console.c       ：
C C++字符串基础，类型，使用方法大全(字符，字符串(1)
m0_54903333的博客
04-21 579
不能插入和删除数组元素有时候会非常麻烦，比如一个数组保存了某个班级的学生学号，现在有一名学生退学了，就得把 TA 从数组中剔除，但是C语言并不支持这么做，这就给编程带来了不小的麻烦。
red hat第一次学习整理
qq_45149045的博客
10-31 387
10月27日red hat第一次学习 上周六周日忘情大神程老师带我们学习了一些基础的、简单有趣的Linux命令，我们了解了Linux这个生动的系统，也学习了如何安装我们自己的虚拟机，以及一些我们学习会需要的一些软件，这也是我第一次使用macdown编辑器，看起来很有趣。相信它以后会是我的得力助手，下面是第一次笔记整理： echo $shell 意思是查看当前系统正在使用的shell终端 /bi...
# 键盘字母上有下标数字，输入时怎么一键去掉，关闭键盘上的下标数字。‌
段子手168的博客
09-07 602
# 键盘字母上有下标数字，输入时怎么一键去掉，关闭键盘上的下标数字。‌
Python Opencv鼠标回调
Jankin的博客
09-05 822
使用 OpenCV 的。
Windows 11的新游戏手柄键盘现在可让玩家使用Xbox手柄打字
weixin_41446370的博客
09-04 639
微软现在正与 Valve展开一场掌上游戏 PC 的竞赛，因为这家 Steam Deck 制造商正准备利用其 SteamOS 作品，将其推广到更多搭载 Windows 系统的掌上设备上。作为 Windows 11 测试版的一部分，游戏手柄键盘目前正在测试中，甚至还包含了按键加速器，这样你就可以用 X 键来退格，用 Y 键来空格键，用 Xbox 手柄上的菜单键来回车。游戏手柄键盘布局改进了 Windows 11 中的屏幕键盘，因此玩家可以使用 Xbox 控制器在操作系统中打字或导航。
关于前端分辨率兼容和显示器缩放兼容的处理
m0_57307213的博客
09-07 569
如下两图所示，在不同分辨率下，页面的宽度和分辨率的宽度是一致的。所以其实我们在1920的宽度分辨率下，把窗口缩小宽度到1600，是可以模拟1600分辨率的情况的。那么我们把我们的窗口宽度调整为1920/1.25% = 1536px的宽度，即可模拟测试人员的电脑显示状况，方便我们复现问题。所以当测试人员给我们提分辨率兼容的问题单的时候，一般都是我们开发的页面，在更小的分辨率尺寸中显示异常。那么其实我们可以通过缩小我们的浏览器窗口，达到模拟测试人员机器的电脑分辨率的情况。但是有时候，测试人员的电脑会进行放大。
AOC商用显示器赋能绿色教育，助推教育信息化发展
sky
09-06 568
实际应用于各大教育场景中，为了减轻师生用眼负担，24E2HM/WW商用显示器通过德国TÜV低蓝光认证，可有效减少短波蓝光对眼睛的危害，加上DC直流背光技术，双重爱护眼睛，进而打造更舒适、更健康的教育环境。针对教学环境中师生的实际使用需求，AOC为商用显示器注入了高清炫彩等基因。实际应用中，24E2HM/WW商用显示器正常工作时消耗功率约为23W，待机时消耗功率低至0.3W，所消耗功率远低于国家标准和多数商用显示器产品，批量应用时可带来低功耗、低发热量、高利用率的使用体验，大幅降低学校用电成本。
推荐练习键盘盲打的网站
laochao2020的博客
09-08 253
这是一个专业的在线打字练习平台，提供科学合理的课程设置和个性化学习计划，适合各个水平的用户。它还提供实时反馈和数据分析，帮助你提升打字速度和准确度。：提供了丰富的盲打课程和科学的打字课程设计，还有诗词歌赋、经典名著等多样化的练习内容，让学习打字的同时也能收获知识。：这是一个免费在线打字练习平台，提供有趣的游戏互动体验和科学的课程设计，帮助你轻松掌握打字技巧。：这个网站提供了专业的盲打指法教学和循序渐进的学习路径，适合初学者系统性地提高打字技能。：这个网站提供了基础的打字练习，适合初学者从零开始学习打字。
高度可定制的电竞鼠标，雷柏VT1 PRO MAX体验
最新发布
Thoughtlee的博客
09-10 377
只需要使用鼠标原装的nano接收器，就可用获得4K信号回报率，使得雷柏VT1 PRO MAX的鼠标延迟低至0.25ms，性能非常出色，而且配合鼠标的驱动软件，还可以获得固件升级，从而在后期获得更好的稳定性和更多的功能，比如通过OTA升级到无线8K，这样鼠标延迟可降至0.125ms。比如在PC游戏中，鼠标的影响就非常大，像是在游戏中如果鼠标延迟过高，就很难在瞬息万变的游戏场景中把握机会，大幅削弱战斗力，因此在玩PC游戏的时候，一个专业的电子竞技鼠标是不可或缺的。
8K回报率10枚自定义按键，PC游戏丝滑操作，雷柏VT1 Pro MAX鼠标体验
科技领袖の博客
09-10 658
雷柏VT1 Pro MAX这款鼠标设计简洁，而且相当轻巧，它有幽魂和无极两种配色可选，相比于同类鼠标，它的优势在用能够支持无线4K、有线8K的回报率，提供更加细腻的操作体验，在分秒必争的游戏操作中，能够让我们更容易抓住战机，配合宏按键等功能，实现丝滑的操作。作为一款游戏鼠标，按键的配置和自定义非常关键，雷柏VT1 Pro MAX鼠标正面配备了4个按键和一个滚轮，左侧则有2个侧键，在雷柏官方驱动软件上面，可以对这些按键进行自定义设置，可以定制的按键动作多达9个，另外还有底部的一枚DIY键，一共是10枚按键。
帮我写一个有意思的C语言程序
02-26
好的，这里是一个简单的C语言程序，它会从用户那里获取一个数字，并打印出它是奇数还是偶数： ``` #include int main() { int num; printf("请输入一个整数："); scanf("%d", &num); if (num % 2 == 0) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

timi先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值