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:

  • 相关阅读:
    函数式对象
    PageRank网页排名算法
    文档倒排序索引
    单词共现算法
    MapReduce关系代数运算
    矩阵乘法的MapReduce实现
    对象序列化(二)
    信息流产品和内容推荐算法
    从企业实操的角度谈深度学习(图像方向)的底层逻辑之概念普及
    Python深度学习企业实战之TensorFlow的底层原理及安装
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10465716.html
Copyright © 2011-2022 走看看