摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。可交互視頻教程此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接全屏預(yù)覽。

https://codepen.io/zhang-ou/pen/deVgRM

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/c/cb6pkUE

請(qǐng)從 github 下載。

https://github.com/comehope/front-end-daily-challenges/tree/master/014-three-languages-for-web-development

定義 dom，一個(gè)容器中包含一個(gè) span，span 內(nèi)有文字：

    HTML

居中顯示：

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top left, white, dimgray);
}

畫出書的正面：

.book {
    width: 12rem;
    height: 18rem;
    background: linear-gradient(navy, deeppink, tomato);
    transform: skewY(-10deg);
}

畫出書的側(cè)面：

.book {
    position: relative;
}

.book::before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 100%;
    background: linear-gradient(navy, deeppink, tomato);
    top: 0;
    left: -1.5rem;
    transform: skewY(45deg);
    transform-origin: right;
    filter: brightness(0.6);
}

畫出書的頂面：

.book::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1.5rem;
    background: white;
    top: -1.5rem;
    left: 0;
    transform-origin: bottom;
    transform: skewX(45deg);
    filter: brightness(0.9);
}

給圖書加陰影，讓它顯得更立體：

.book {
    box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.5);
}

設(shè)置文字樣式：

.book span {
    color: whitesmoke;
    font-size: 2.2rem;
    font-family: sans-serif;
    display: block;
    background: silver;
    text-align: center;
    height: 8rem;
    margin-top: 5rem;
    padding-top: 2rem;
    box-sizing: border-box;
    text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
}

畫出文字側(cè)面，與畫圖書側(cè)面的方法相似：

.book span {
    position: relative;
}

.book span::before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 100%;
    background: silver;
    top: 0;
    left: -1.5rem;
    transform-origin: right;
    transform: skewY(45deg);
    filter: brightness(0.6);
}

文字下增加一行小字號(hào)文字：

.book span::after {
    content: "development";
    display: block;
    font-size: 1rem;
}

dom 改為 3 本書，包含在一個(gè)容器之中，并且分別命名樣式類：

    

        HTML
    
    

        CSS
    
    

        JavaScript
    

3 本書布局：

.books {
    display: flex;
    width: calc(12rem * 3 + 3rem * 2);
    justify-content: space-between;
    margin-top: 6rem;
}

.book:nth-child(2) {
    top: -3rem;
}

.book:nth-child(3) {
    top: -6rem;
}

3 本書配色：

.book.html span,
.book.html span::before {
    background: orange;
}

.book.css span,
.book.css span::before {
    background: yellowgreen;
}

.book.js span,
.book.js span::before {
    background: royalblue;
}

設(shè)置 3 本書的小字號(hào)文字：

.book.html span:after {
    content: "";
}

.book.css span::after {
    content: ".devolopment::";
}

.book.js span::after {
    content: "{ devolopment }";
}

最后，為圖書增加鼠標(biāo)劃過效果：

.book {
    transition: 0.3s;
}

.book:hover {
    margin-top: -1.5rem;
}

大功告成！

justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

skewY() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY

skewX() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX

transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

brightness() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness