温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-02-28 14:14:35 来源:亿速云 阅读:150 作者:小新 栏目:web开发

这篇文章主要为大家展示了“怎么使用纯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实现蝴蝶标本的展示框效果怎么使用纯CSS实现蝴蝶标本的展示框效果

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI