纯CSS构建的银白色Mac电脑全键盘

CSS only Mac Keyboard，点击可以有下按的效果。

css, keyboard, mac

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3174
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    font-size: 12px;
    font-family: monospace;
    text-align: center;
}
.keyboard {
    display: inline-block;
    padding: 4em 1em 1em;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.27, #d4d8db), color-stop(0.64, #d5d9dc), color-stop(0.95, #e6e9eb), color-stop(1, #bfbfbf));
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5);
    box-shadow: 4px 4px 5px 0px rgba(100, 100, 100, 0.5);
}
.keyboard .row {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin: 0.7em auto;
}
.key {
    margin: 0;
    padding: 1em 2em;
    background-color: #eff0f2;
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    -webkit-box-shadow: inset 1px 0 25px #dfdfdf, 0 1px 0 #cfcfcf, 0 1px 0 #bfbfbf, 0 1px 1px #6f6f6f;
}
.key.narrow {
    padding: 0.6em 2em;
}
.key:active {
    box-shadow: inset 0 0 50px #ddd, 0 0 2px #888;
}
.row-3 .key:first-child,
.row-4 .key:first-child,
.row-5 .key:first-child {
    font-size: .9em;
    padding: 1.5em 3em 0.5em .8em;
    text-align: left;
}
.row-2 .key:last-child,
.row-4 .key:last-child,
.row-5 .key:last-child {
    font-size: .9em;
    padding: 1.5em .8em 0.5em 3em;
    text-align: right;
}
.row-1 {
    font-size: .9em;
}
.row-5 .key:first-child {
    padding-right: 4.5em;
}
.row-5 .key:last-child {
    padding-left: 4.5em;
}
.row-6 {
    font-size: .9em;
}
.row-6 .key {
    padding: 2em 1.5em 0.8em;
}
.row-6 .key:nth-child(5) {
    padding-left: 10em;
    padding-right: 10em;
}
.row-6 .key:nth-child(8),
.row-6 .key:nth-child(9),
.row-6 .key:nth-child(10) {
    padding: 1em 2em 0.8em;
    position: relative;
    margin-bottom: 0;
}
.row-6 .key:nth-child(8):after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid #888;
}
.row-6 .key:nth-child(9) {
    position: relative;
    padding-top: 3em;
}
.row-6 .key:nth-child(9):before {
    position: absolute;
    top: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #888;
}
.row-6 .key:nth-child(9):after {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #888;
}
.row-6 .key:nth-child(10):after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #888;
}

HTML

<div class='keyboard'>
    <div class='row row-1'>
        <div class='0 key narrow'>esc</div>
        <div class='1 key narrow'>F1</div>
        <div class='2 key narrow'>F2</div>
        <div class='3 key narrow'>F3</div>
        <div class='4 key narrow'>F4</div>
        <div class='5 key narrow'>F5</div>
        <div class='6 key narrow'>F6</div>
        <div class='7 key narrow'>F7</div>
        <div class='8 key narrow'>F8</div>
        <div class='9 key narrow'>F9</div>
        <div class='10 key narrow'>F10</div>
        <div class='11 key narrow'>F11</div>
        <div class='12 key narrow'>F12</div>
        <div class='13 key narrow'>eject</div>
    </div>
    <div class='row row-2'>
        <div class='0 key'>~</div>
        <div class='1 key'>1</div>
        <div class='2 key'>2</div>
        <div class='3 key'>3</div>
        <div class='4 key'>4</div>
        <div class='5 key'>5</div>
        <div class='6 key'>6</div>
        <div class='7 key'>7</div>
        <div class='8 key'>8</div>
        <div class='9 key'>9</div>
        <div class='10 key'>0</div>
        <div class='11 key'>-</div>
        <div class='12 key'>=</div>
        <div class='13 key'>delete</div>
    </div>
    <div class='row row-3'>
        <div class='0 key'>tab</div>
        <div class='1 key'>Q</div>
        <div class='2 key'>W</div>
        <div class='3 key'>E</div>
        <div class='4 key'>R</div>
        <div class='5 key'>T</div>
        <div class='6 key'>Y</div>
        <div class='7 key'>U</div>
        <div class='8 key'>I</div>
        <div class='9 key'>O</div>
        <div class='10 key'>P</div>
        <div class='11 key'>{</div>
        <div class='12 key'>}</div>
        <div class='13 key'>|</div>
    </div>
    <div class='row row-4'>
        <div class='0 key'>caps lock</div>
        <div class='1 key'>A</div>
        <div class='2 key'>S</div>
        <div class='3 key'>D</div>
        <div class='4 key'>F</div>
        <div class='5 key'>G</div>
        <div class='6 key'>H</div>
        <div class='7 key'>J</div>
        <div class='8 key'>K</div>
        <div class='9 key'>L</div>
        <div class='10 key'>;</div>
        <div class='11 key'>"</div>
        <div class='12 key'>&#39;</div>
        <div class='13 key'>return</div>
    </div>
    <div class='row row-5'>
        <div class='0 key'>shift</div>
        <div class='1 key'>Z</div>
        <div class='2 key'>X</div>
        <div class='3 key'>C</div>
        <div class='4 key'>V</div>
        <div class='5 key'>B</div>
        <div class='6 key'>N</div>
        <div class='7 key'>M</div>
        <div class='8 key'>
            <</div>
                <div class='9 key'>></div>
                <div class='10 key'>?</div>
                <div class='11 key'>shift</div>
        </div>
        <div class='row row-6'>
            <div class='0 key'>fn</div>
            <div class='1 key'>control</div>
            <div class='2 key'>option</div>
            <div class='3 key'>command</div>
            <div class='4 key'>&nbsp;</div>
            <div class='5 key'>command</div>
            <div class='6 key'>option</div>
            <div class='7 key'></div>
            <div class='8 key'></div>
            <div class='9 key'></div>
        </div>
    </div>

CSS only Mac Keyboard，点击可以有下按的效果。

css, keyboard, mac

编辑器支持Emmet

快捷键

CSS only Mac Keyboard，点击可以有下按的效果。

css, keyboard, mac

CSS构建的3D旧式电脑和键盘

使用CSS3弹性框特性构建的键盘平板和USB线（黑色版）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：