我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

作为程序员天天敲打着键盘，我就想能否通过css实现呢，今天我们就用css来实现一下虚拟键盘，为了不让他看起来那么单调，我们在给它添加一个变化主题色的功能

效果图

未变色前

变色后

实现思路

我们来分析下布局，这一个键盘是大盒子，然后大盒子里面有三个盒子，这三个盒子分别代表三行，每一行Y轴不对齐

页面结构

三行盒子我们通过无序列表进行实现，键盘上有一个Fn键，他是用于控制键盘主题色变化的，我们把他单独拿出来

  <!-- 大盒子 -->
    <div id="app">
        <div id="btn">Fn</div>
        <ul>
            <!-- 键盘列 -->
            <li>
                <div>q</div>
                <div>w</div>
                <div>e</div>
                <div>r</div>
                <div>t</div>
                <div>y</div>
                <div>u</div>
                <div>i</div>
                <div>o</div>
                <div>p</div>
            </li>
            <li>
                <div>a</div>
                <div>s</div>
                <div>d</div>
                <div>f</div>
                <div>g</div>
                <div>h</div>
                <div>j</div>
                <div>k</div>
                <div>l</div>
            </li>
            <li>
                <div>z</div>
                <div>x</div>
                <div>c</div>
                <div>v</div>
                <div>b</div>
                <div>n</div>
                <div>m</div>
            </li>
        </ul>
    </div>

样式实现

我们先清除所有元素的基本样式，给在外面的大盒子设置好样式，高度我们让里面的内容把他撑起来

  * {
           box-sizing: border-box;
            list-style: none;
        }

        /* 大盒子 */
        #app {
            position: relative;

            width: 680px;
            margin: 13vh auto;
            display: flex;
            justify-content: center;
            border: 1px solid #ccc;
            border-radius: 10px;
        }

在设置键盘的每一行的位置，我们这里使用外边距属性让无序列表的子元素距离左边都有距离，这样第一列初始就不对齐，后面每一列自然不对齐

   ul {
            padding: 0;
        }

        /* 键盘每一列 */
        ul li {
            display: flex;
            overflow: hidden;
        }

        ul li:nth-child(2) {
            margin-left: 24px;
        }

        ul li:nth-child(3) {
            margin-left: 52px;
        }

实现键帽的样式，我们这里给键帽里面的文字设置一个发光样式，由于初始是白光，所以看不到，只有当变换主题色的时候才可以看到

        /* 键帽 */
        ul li div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            text-transform: capitalize;
            margin: 8px;
            box-shadow: 0px 0px 3px 0px #ccc;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            transition: background 0.05s;
            text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #00a67c,
                0 0 70px #00a67c,
                0 0 80px #00a67c,
                0 0 100px #00a67c,
                0 0 150px #00a67c;
        }

        /* 键帽滑过 */
        ul li div:hover {
            background: #eee;

        }

最后将Fn键样式写一下，在通过定位的方式定位到合适的位置即可

   /* 按钮 */
        #btn {
            position: absolute;
            bottom: 4px;
            right: 20px;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 130px;
            height: 50px;
            user-select: none;
            cursor: pointer;
            border-radius: 10px;
            background: #eee;
        }

主题色变换逻辑实现

           // 获取Fn键
        const btn = document.getElementById('btn');
        // 获取所有的键帽
        const keyupAll = document.querySelectorAll('ul li div');
        // 给Fn键绑定点击事件
        btn.onclick = function () {
            // 随机获取3个0~255之间的数用于更换背景色
            const R = Math.round(Math.random() * 255);
            const G = Math.round(Math.random() * 255);
            const B = Math.round(Math.random() * 255);
          
            // 把随机数添加到css的rgba属性中
            let rgba = `rgb(${R},${G},${B},${0.5})`
            // 按键也需要用到背景色，更换主题按钮的背景色和普通的键帽需要有区别所以给出区别
            this.style.backgroundColor = `rgb(${R},${G},${R},${0.5})`
            // 循环每个键帽并赋值背景色
            for (let i = 0; i < keyupAll.length; i++) {
                keyupAll[i].style.backgroundColor = rgba
            }
        }
        // 给键帽添加点击事件,当键帽点击弹出我们点击的按键内容
        keyupAll.forEach(function (R) {
            R.onclick = function () {
                alert(`您按下了${this.innerText}键`)
            }
        })

代码我放到码上掘金上了，感兴趣的可以看一看!

坚持努力，无惧未来！