溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“怎么使用純CSS實現蝴蝶標本的展示框效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“怎么使用純CSS實現蝴蝶標本的展示框效果”這篇文章吧。
代碼解讀
定義dom，容器表示整只蝴蝶，因為蝴蝶是對稱的，所以分為左右兩邊，每邊有3個子元素：
<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;
}
先畫左半邊：
.butterfly.left{
position:absolute;
width:inherit;
height:inherit;
}
用第1個子元素畫出翅膀的上半部分：
.butterflyspan{
position:absolute;
border-radius:50%;
}
.butterflyspan:nth-child(1){
width:5em;
height:7em;
background-color:gold;
}
用第2個子元素畫出翅膀的下半部分：
.butterflyspan:nth-child(2){
width:5.5em;
height:3.5em;
background-color:orangered;
top:5em;
left:-2.5em;
filter:opacity(0.6);
}
用第3個子元素畫出觸角：
.butterflyspan:nth-child(3){
width:6em;
height:6em;
border-right:0.3emsolidorangered;
top:-0.5em;
}
把左半邊復制一份到右半邊：
.butterfly.right{
position:absolute;
width:inherit;
height:inherit;
}
.butterfly.right{
transform:rotateY(180deg)rotate(-90deg);
top:0.4em;
left:0.4em;
}
把標本裝到展示框里：
.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;
}
最后，調整一下因圖案傾斜引起的位移：
.butterfly{
transform:translateX(1em);
}
以上是“怎么使用純CSS實現蝴蝶標本的展示框效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
