您好,登錄后才能下訂單哦!
使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本展示框效果?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載:
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器表示整只蝴蝶,因?yàn)楹菍?duì)稱(chēng)的,所以分為左右兩邊,每邊有 3 個(gè)子元素:
<div class="butterfly"> <div class="left"> <span></span> <span></span> <span></span> </div> <div class="right"> <span></span> <span></span> <span></span> </div> </div>
居中顯示:
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); }
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本展示框效果大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。