前端每日實(shí)戰(zhàn)：47# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)蝴蝶標(biāo)本展示框

sourcenode 發(fā)布于2019-08-02 10:41 / 914人閱讀

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

效果預(yù)覽

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

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

可交互視頻教程

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

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

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

源代碼下載

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

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

代碼解讀

定義 dom，容器表示整只蝴蝶，因?yàn)楹菍?duì)稱(chēng)的，所以分為左右兩邊，每邊有 3 個(gè)子元素：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(gray, lightyellow, gray);
}

定義蝴蝶的尺寸：

.butterfly {
    position: relative;
    width: 10em;
    height: 10em;
}

先畫(huà)左半邊：

.butterfly .left {
    position: absolute;
    width: inherit;
    height: inherit;
}

用第 1 個(gè)子元素畫(huà)出翅膀的上半部分：

.butterfly span {
    position: absolute;
    border-radius: 50%;
}

.butterfly span:nth-child(1) {
    width: 5em;
    height: 7em;
    background-color: gold;
}

用第 2 個(gè)子元素畫(huà)出翅膀的下半部分：

.butterfly span:nth-child(2) {
    width: 5.5em;
    height: 3.5em;
    background-color: orangered;
    top: 5em;
    left: -2.5em;
    filter: opacity(0.6);
}

用第 3 個(gè)子元素畫(huà)出觸角：

.butterfly span:nth-child(3) {
    width: 6em;
    height: 6em;
    border-right: 0.3em solid orangered;
    top: -0.5em;
}

把左半邊復(fù)制一份到右半邊：

.butterfly .right {
    position: absolute;
    width: inherit;
    height: inherit;
}

.butterfly .right {
    transform: rotateY(180deg) rotate(-90deg);
    top: 0.4em;
    left: 0.4em;
}

把標(biāo)本裝到展示框里：

.butterfly::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: -2.5em;
    left: -8em;
    width: 24em;
    height: 18em;
    background-color: black;
      border: 0.2em inset silver;
}

.butterfly::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 40em;
    height: 30em;
    background-color: lightyellow;
    top: -9em;
    left: -16em;
    border: 2em solid burlywood;
    border-radius: 3em;
    box-shadow: 
        0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3),
        inset 0.4em 0.4em 0.1em 0.5em rgba(0, 0, 0, .4);
    z-index: -1;
}

最后，調(diào)整一下因圖案傾斜引起的位移：

.butterfly {
    transform: translateX(1em);
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用js實(shí)現(xiàn)模態(tài)框 js如何用下拉框綁定數(shù)據(jù) 如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站

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

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

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

登陸后可評(píng)論

0條評(píng)論

sourcenode

男|高級(jí)講師

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

TA的文章

ubuntu安裝tensorflow

閱讀 3527·2023-04-25 14:57
#yyds干貨盤(pán)點(diǎn)#設(shè)計(jì)模式之【單例模式】

閱讀 2574·2021-11-22 14:56
易探云：金秋上云節(jié),香港/美國(guó)/韓國(guó)云服務(wù)器最低9元;香港物理機(jī)/虛擬主機(jī)優(yōu)惠促銷(xiāo)

閱讀 2097·2021-09-29 09:45
有個(gè)云主機(jī)可以做什么-云主機(jī)能做什么？

閱讀 1779·2021-09-22 15:53
Virtono：夏季促銷(xiāo)，年付5折€23.7/年起，洛杉磯/達(dá)拉斯/紐約/羅馬尼亞等

閱讀 3327·2021-08-25 09:41
css百分比總結(jié)，自適應(yīng)布局

閱讀 908·2019-08-29 15:22
聽(tīng)說(shuō)2017你想寫(xiě)前端？

閱讀 3307·2019-08-29 13:22
前端web網(wǎng)站上中（左右）下布局(flex、calc)

閱讀 3132·2019-08-29 13:08

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

資訊專(zhuān)欄INFORMATION COLUMN

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

前端每日實(shí)戰(zhàn)：47# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)蝴蝶標(biāo)本展示框

相關(guān)文章