css3练习：苹果笔记本电脑（有键盘和无键盘）

作者: 0清婉0 | 来源:发表于2021-03-09 21:32 被阅读0次

css3练习：苹果笔记本电脑（有键盘和无键盘）
随想
1.5独立键盘
禁用笔记本内置键盘
Mac系列-004：键盘及修饰键
工具｜PS常用快捷键
英文破折号怎么打
(八百九十三)敲击键盘
Android关于键盘相关知识
macOS常用快捷键

今天看到一句我最喜欢的名言，和大家分享一下。

周恩来说：世界上最聪明的人是最老实的人，因为只有老实人才能经得事实和历史的考验。

下面再和大家分享一下今天的CSS3例子，一个最有立体感的苹果笔记本电脑。

在学习CSS3时，一定要自己敲代码。不要抄。这样才能慢慢学会CSS3知识。

<div class="macbook">

<div class="screen"></div>

<div class="base"></div>

</div>

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-image: linear-gradient(black, gray, silver, gray, black);

}

.macbook {

font-size: 10px;

width: 50em;

display: flex;

flex-direction: column;

align-items: center;

}

.screen {

width: 40em;

height: calc(40em*0.667);

box-sizing: border-box;

border: black solid;

border-width: 1.8em 1.3em 1.7em 1.3rem;

border-radius: 3% 3% 0 0 / 5%;

box-shadow: 0 0 0 0.1em silver;

background: radial-gradient( circle at right bottom, rgba(255, 255, 255, 0.4) 33em, rgba(255, 255, 255, 0.6) 33em), black;

}

.base {

width: inherit;

height: 1.75em;

/*border:2px solid yellow;*/

--bottom: linear-gradient( white 55%, #999 60%, #222 90%, rgba(0, 0, 0, 0.1) 100%);

border-radius: 0 0 10% 10% / 0 0 50% 50%;

--top: linear-gradient( to right, hsla(0, 0%, 0%, 0.5) 0%, hsla(100, 100%, 100%, 0.8) 1%, hsla(0, 0%, 0%, 0.4) 4%, transparent 15%, hsla(100, 100%, 100%, 0.8) 50%, transparent 85%, hsla(0, 0%, 0%, 0.4) 96%, hsla(100, 100%, 100%, 0.8) 99%, hsla(0, 0%, 0%, 0.5) 100%) no-repeat top/100% 55%;

background: var(--top), var(--bottom);

}

.base::before {

content: '';

position: absolute;

width: 7em;

height: 0.7em;

/*border:2px solid dodgerblue;*/

border-radius: 0 0 7% 7% / 0 0 95% 95%;

left: calc(50% - 7em/2);

box-shadow: inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2), inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2);

background-color: #ddd;

}

再来一个我写的综合例子，一个带键盘的苹果笔记本电脑

<div class="macbook">

<div class="screen">

<div class="s_txt">MacBook Pro</div>

</div>

<div class="kbd">

<div class="stoma"></div>

<div class="keys">

<ul class="row row1">

<li class="esc">esc</li>

</ul>

<ul class="row row2">

<li>~</li>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>0</li>

<li>-</li>

<li>=</li>

<li class="delete">×</li>

</ul>

<ul class="row row2">

<li>→|</li>

<li>Q</li>

<li>W</li>

<li>E</li>

<li>R</li>

<li>T</li>

<li>Y</li>

<li>U</li>

<li>I</li>

<li>O</li>

<li>P</li>

<li>[</li>

<li>]</li>

<li>\</li>

</ul>

<ul class="row row2">

<li class="back">中/英</li>

<li>A</li>

<li>S</li>

<li>D</li>

<li>F</li>

<li>G</li>

<li>H</li>

<li>J</li>

<li>K</li>

<li>L</li>

<li>;</li>

<li>'</li>

<li class="back">↩︎</li>

</ul>

<ul class="row row2">

<li class="shift">⇧</li>

<li>Z</li>

<li>X</li>

<li>C</li>

<li>V</li>

<li>B</li>

<li>N</li>

<li>M</li>

<li>,</li>

<li>。</li>

<li>/</li>

<li class="shift">⇧</li>

</ul>

<ul class="row row2">

<li>fn</li>

<li>^</li>

<li>⌥</li>

<li>⌘</li>

<li class="space"></li>

<li>⌘</li>

<li>⌥</li>

<li>◀</li>

<li class="arw"></li>

<li>►</li>

</ul>

</div>

<div class="stoma"></div>

<div class="base"></div>

</div>

</div>

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-image: linear-gradient(black, gray, silver, gray, black);

}

ul,li{list-style: none;}

.macbook {

font-size: 10px;

width: 50em;

display: flex;

flex-direction: column;

align-items: center;

}

.macbook *::before,

.macbook *::after{

content:'';

position: absolute;

}

.screen{

width: 40em;

height: calc(45em*0.667);

box-sizing: border-box;

border: black solid;

border-width: 1.8em 1.3em 1.7em 1.3rem;

border-radius: 3% 3% 0 0 / 5%;

box-shadow: 0 0 0 0.1em silver;

transform: rotatex(-45deg);

background: radial-gradient( circle at right bottom, rgba(255, 255, 255, 0.4) 33em, rgba(255, 255, 255, 0.6) 33em), black;

}

.screen::before{

margin: -13px auto;

width: 5px;

height: 5px;

border-radius: 50%;

background: #00E676;

animation: webcam 1000ms linear 800ms infinite;

left: calc(50% - 5px/2);

}

.screen::after{

left: 0;

right: 0;

margin:0 auto;

bottom: -48px;

left: -23px;

width: 30rem;

height: 36px;

background: #111;

border-radius: 0 0 12px 12px;

border-left: 2px solid silver;

border-right: 2px solid silver;

border-bottom: 2px solid silver;

}

.s_txt{

position: absolute;

left: 0;

right: 0;

margin:0 auto;

position: absolute;

font-size: 14px;

color: #999;

bottom: -32px;

left: 42%;

z-index: 99;

}

@keyframes webcam{

0%,10%,31%,60%,100% {

background: #a6a6a6;

}

11%,30%,61%,99% {

background: #00E676;

}

}

.kbd{

display: flex;

flex-direction: row;

z-index: 1;

padding: 30px 5px 0em 5px;

margin-top: -36px;

width: 460px;

height: 295px;

background: silver;

border-radius: 16px;

position: relative;

justify-content: center;

box-shadow: 0 0 3px rgba(255, 255, 255, 0.5) inset

}

.kbd::before{

top: 0;

left: 0;

right: 0;

margin:0 auto;

width: 340px;

height: 9px;

background: #222;

box-shadow: 0 0 6px rgba(0, 0, 0, 0.7) inset;

}

.kbd::after{

left: 0;

right: 0;

margin:0 auto;

bottom: 10px;

border-radius: 6px;

border: 1px solid #999;

width: 15em;

height: 7.5em;

background: silver;

}

.stoma{

margin-top: 6px;

width: 22px;

height: 158px;

background: radial-gradient(#555 26%, transparent 0);

background-size: 3px 3px;

}

.keys{

display: flex;

flex-direction: column;

margin: 0 5px 0 5px;

width: 400px;

height: 184px;

box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.3);

border-radius: 4px;

}

.row{

display: flex;

flex-direction: row;

justify-content: space-between;

padding: 7px 5px 0 5px;

border-radius: 3px;

width: 380px;

margin:0 auto;

}

.row1{background-color: #232323;margin-top:5px;padding-top: 3px;}

.row2{padding:7px 3px 0 3px;width:390px;}

.row li{

color: white;

background: #111;

border-radius: 2px;

box-shadow: 0 0 0 1px black;

height: 22px;

width: 22px;

font-size: 7px;

display: flex;

justify-content: center;

align-items: center;

font-weight: bold;

font-family: sans-serif;

}

.row1 li{

background:#525358;

color:#dddee2;

border-radius: 2.25px;

padding:0 3px;

margin-bottom:3px;

}

.row2 li.delete,.row2 li.contrl{

width:36px;

}

.row2 li.back{

width: 40px;

}

.row2 li.shift{

width: 50px;

}

.row2 li.space{

width: 140px;

}

.row2 li.arw::before{

content:'▴';

width:22px;

text-align: center;

display: block;

padding-bottom: 10px;

}

.row2 li.arw::after{

content:'▾';

width:22px;

text-align: center;

display: block;

padding-top: 10px;

}

.base{

width: 7em;

height: 0.3em;

border-radius: 7% 7% 0 0 / 95% 95% 0 0;

left: calc(50% - 7em/2);

background-color: #000;

position: absolute;

bottom:0;

}