前端每日實(shí)戰(zhàn)：124# 視頻演示如何用純 CSS 創(chuàng)作一只紙鶴

IntMain 發(fā)布于2019-08-29 16:37 / 1336人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。最后，增加一點(diǎn)交互效果，當(dāng)鼠標(biāo)懸停時(shí)，由等腰直角三角形變形成鶴大功告成

效果預(yù)覽

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

https://codepen.io/comehope/pen/xagoYb

可交互視頻

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

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

https://scrimba.com/p/pEgDAM/cPw8eSg

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含 6 個(gè)元素，分別代表頭、頸、身體側(cè)面、翅、尾、胸：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: dodgerblue;
}

定義容器尺寸：

.cranes {
    width: 52em;
    height: 50em;
    font-size: 7px;
}

設(shè)置紙鶴的顏色為白色：

.cranes {
    color: white;
}

畫出頭部：

.cranes {
    position: relative;
}

.head {
    border-left: 13em solid transparent;
    border-right: 6em solid transparent;
    border-bottom: 2em solid;
    position: absolute;
    left: 0;
    top: 21;
    transform: rotate(-5deg);
}

把以上創(chuàng)建三角形的代碼抽象成一個(gè)模板，然后數(shù)據(jù)都改為變量，類似于調(diào)用函數(shù)的樣子：

.cranes span {
    border-left: calc(var(--left) * 1em) solid transparent;
    border-right: calc(var(--right) * 1em) solid transparent;
    border-bottom: calc(var(--bottom) * 1em) solid;
    position: absolute;
    transform: rotate(calc(var(--rotation) * 1deg));
    left: calc(var(--x) * 1em);
    top: calc(var(--y) * 1em);
}

.head {
    --left: 13;
    --right: 6;
    --bottom: 2;    
    --x: 0;
    --y: 21;
    --rotation: -5;
}

設(shè)置透明度，以便元素疊加處有折紙效果：

.cranes span {
    filter: opacity(0.6);
}

接下來就是逐個(gè)調(diào)用生成三角形的函數(shù)創(chuàng)建其他三角形：

頸：

.neck {
    --left: 6;
    --right: 6;
    --bottom: 12;
    --x: 14;
    --y: 19;
    --rotation: 75;
}

身體側(cè)面：

.side {
    --left: 1.5;
    --right: 11.5;
    --bottom: 20;
    --x: 18.8;
    --y: 15.1;
    --rotation: 20;
}

翅：

.wing {
    --left: 18.7;
    --right: 30;
    --bottom: 8;
    --x: 6.7;
    --y: 9.2;
    --rotation: -41.9;
}

尾：

.tail {
    --left: 18.6;
    --right: 7.7;
    --bottom: 3.9;
    --x: 19.6;
    --y: 38.1;
    --rotation: -126.5;
}

胸：

.belly {
    --left: 6.2;
    --right: 1.8;
    --bottom: 11.5;
    --x: 17.5;
    --y: 27.8;
    --rotation: -99;
}

至此，紙鶴畫完。
最后，增加一點(diǎn)交互效果，當(dāng)鼠標(biāo)懸停時(shí)，由等腰直角三角形變形成鶴：

.cranes:hover span {
    animation: appear 1s ease-in;
}

@keyframes appear {
    from {
        border-left: 3em solid transparent;
        border-right: 3em solid transparent;
        border-bottom: 3em solid;
        position: absolute;
        transform: rotate(0deg);
        left: calc((52em - 3em) / 2);
        top: calc((50em - 3em) / 2);
    }
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用vue開發(fā)實(shí)時(shí)音視頻純CSS 如何用云計(jì)算

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113860.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

IntMain

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2021年最新UCloud優(yōu)惠碼：北上廣/香港/臺(tái)灣等31個(gè)機(jī)房/低至每月4元

閱讀 1781·2021-09-28 09:43
SSID剝離漏洞可讓黑客模擬真實(shí)無線接入點(diǎn) 影響多個(gè)軟件平臺(tái)

閱讀 1128·2021-09-23 11:22
一鍵安裝LNMP或LAMP Web環(huán)境實(shí)現(xiàn)Linux服務(wù)器部署 PHP MySQL Nginx/Ap

閱讀 2746·2021-09-14 18:05
面試闖關(guān)2

閱讀 1833·2019-08-30 15:52
關(guān)于移動(dòng)端適配，你必須要知道的

閱讀 2828·2019-08-30 10:55
前端骨架屏方案小結(jié)

閱讀 2022·2019-08-29 16:58
前端每日實(shí)戰(zhàn)：124# 視頻演示如何用純 CSS 創(chuàng)作一只紙鶴

閱讀 1337·2019-08-29 16:37
css制作凸字型框

閱讀 3049·2019-08-29 16:25

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

前端每日實(shí)戰(zhàn)：124# 視頻演示如何用純 CSS 創(chuàng)作一只紙鶴

相關(guān)文章