怎么使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本的展示框效果

這篇文章主要為大家展示了“怎么使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本的展示框效果”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本的展示框效果”這篇文章吧。

　　代碼解讀

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

　　<divclass="butterfly">

　　<divclass="left">

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　<divclass="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à)出翅膀的上半部分：

　　.butterflyspan{

　　position:absolute;

　　border-radius:50%;

　　}

　　.butterflyspan:nth-child(1){

　　width:5em;

　　height:7em;

　　background-color:gold;

　　}

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

　　.butterflyspan:nth-child(2){

　　width:5.5em;

　　height:3.5em;

　　background-color:orangered;

　　top:5em;

　　left:-2.5em;

　　filter:opacity(0.6);

　　}

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

　　.butterflyspan:nth-child(3){

　　width:6em;

　　height:6em;

　　border-right:0.3emsolidorangered;

　　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.2eminsetsilver;

　　}

　　.butterfly::after{

　　content:'';

　　position:absolute;

　　box-sizing:border-box;

　　width:40em;

　　height:30em;

　　background-color:lightyellow;

　　top:-9em;

　　left:-16em;

　　border:2emsolidburlywood;

　　border-radius:3em;

　　box-shadow:

　　00.3em2em0.4emrgba(0,0,0,0.3),

　　inset0.4em0.4em0.1em0.5emrgba(0,0,0,.4);

　　z-index:-1;

　　}

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

　　.butterfly{

　　transform:translateX(1em);

　　}

以上是“怎么使用純CSS實(shí)現(xiàn)蝴蝶標(biāo)本的展示框效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！