zoukankan      html  css  js  c++  java
  • 47.纯 CSS 创作一个蝴蝶标本展示框

    html,body{
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(gray, lightyellow,gray);
    }
    .butterfly{
      position: relative;
      width: 10em;
      height: 10em;
    }
    .butterfly::before,
    .butterfly::after {
        content: '';
        position: absolute;
        box-sizing: border-box;
    }
    .butterfly::before{
      width: 24em;
      height: 18em;
      background-color: black;
      top: -2.5em;
      left: -8em;
      /* inset: 插入 */
      border: inset 0.2em silver;
    }
    .butterfly::after{
      width: 40em;
      height: 30em;
      background-color: lightyellow;
      top: -9em;
      left: -16em;
      z-index: -1;
      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, 0.4);
    }
    .butterfly .left,
    .butterfly .right{
      position: absolute;
      width: inherit;
      height: inherit;
    }
    .butterfly .right{
      transform: rotateY(180deg) rotate(-90deg);
      top: 0.4em;
      left: 0.4em;
    }
    .butterfly span{
      position: absolute;
      border-radius: 50%;
    }
    .butterfly span:nth-child(1){
      width: 5em;
      height: 7em;
      background-color: gold;
    }
    .butterfly span:nth-child(2){
      width: 5.5em;
      height: 3.5em;
      background-color: orangered;
      filter: opacity(0.6);
      top: 5em;
      left: -2.5em;
    }
    .butterfly span:nth-child(3){
      width: 6em;
      height: 6em;
      border-right: 0.3em solid orangered;
      top: -0.5em;
      
    }

    原文地址:https://segmentfault.com/a/1190000015236585

    感想:遇到一个新东西-》/* inset: 插入 */    border: inset 0.2em silver;

    HTML code:

    <div class="butterfly">
      <div class="left">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="right">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    CSS code:

  • 相关阅读:
    python之模块与包
    python之模块4
    python之模块3
    python之模块2
    Day10:Linux基础:搭建samba服务
    Day9:Linux基础:程序管理
    Day8: Linux基础片:网络配置
    番外篇:硬盘分区、创建文件系统
    Day7: Linux基础片:系统监控
    Day6: Linux基础片:文件压缩、Vim用法
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10465716.html
Copyright © 2011-2022 走看看