网站建设 >

查看其它板块

怎么使用纯CSS实现蝴蝶标本的展示框效果

这篇文章主要为大家展示了“怎么使用纯CSS实现蝴蝶标本的展示框效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用纯CSS实现蝴蝶标本的展示框效果”这篇文章吧。

目前成都创新互联已为1000多家的企业提供了网站建设、域名、雅安服务器托管、网站托管维护、企业网站设计、察哈尔右翼前网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

代码解读

定义dom，容器表示整只蝴蝶，因为蝴蝶是对称的，所以分为左右两边，每边有3个子元素：

居中显示：

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实现蝴蝶标本的展示框效果

以上是“怎么使用纯CSS实现蝴蝶标本的展示框效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前题目：怎么使用纯CSS实现蝴蝶标本的展示框效果
链接地址：http://cdkjz.cn/article/ijesoi.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线成都：13518219792 座机：028-86922220

在线咨询提交需求

友情链接交换友情链接

成都气球装饰内江托管服务器重庆小程序开发公司鼎尚理发店成都名片印刷成都定制网站专业网站设计四川胜锦安防成都外贸网站建设公司成都网站建设流程

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图