今天看到一句我最喜歡的名言，和大家分享一下刚盈。
周恩來說：世界上最聰明的人是最老實(shí)的人羡洛，因?yàn)橹挥欣蠈?shí)人才能經(jīng)得事實(shí)和歷史的考驗(yàn)。
下面再和大家分享一下今天的CSS3例子扁掸，一個最有立體感的蘋果筆記本電腦翘县。
在學(xué)習(xí)CSS3時，一定要自己敲代碼谴分。不要抄锈麸。這樣才能慢慢學(xué)會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;
}
