纯CSS构建的透明玻璃笔筒 | 刻度尺 | 铅笔（带橡皮）

css pencil with eraser

css, 文具

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1313
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@mixin ruler-background($backgroundColor,$lineColor,$lineColorLight) {
  background-color: $backgroundColor;
  background-image:
    linear-gradient(90deg,
      $lineColor 0,
      $lineColor 2%,
      transparent 2%
    ),
    linear-gradient(180deg, 
      $backgroundColor 50%,
      transparent 50%
    ),
    linear-gradient(90deg,
      transparent 50%,
      $lineColor 50%,
      $lineColor 52%,
      transparent 52%
    ),
    linear-gradient(180deg, 
      $backgroundColor 70%,
      transparent 70%
    ),
    linear-gradient(90deg,
      transparent 10%,
      $lineColorLight 10%,
      $lineColorLight 12%,
      transparent 12%,
      transparent 20%,
      $lineColorLight 20%,
      $lineColorLight 22%,
      transparent 22%,
      transparent 30%,
      $lineColorLight 30%,
      $lineColorLight 32%,
      transparent 32%,
      transparent 40%,
      $lineColorLight 40%,
      $lineColorLight 42%,
      transparent 42%,
      transparent 60%,
      $lineColorLight 60%,
      $lineColorLight 62%,
      transparent 62%,
      transparent 70%,
      $lineColorLight 70%,
      $lineColorLight 72%,
      transparent 72%,
      transparent 80%,
      $lineColorLight 80%,
      $lineColorLight 82%,
      transparent 82%,
      transparent 90%,
      $lineColorLight 90%,
      $lineColorLight 92%,
      transparent 92%
    );
  background-size: 50px 30px;
  background-repeat: repeat-x;
  min-height: 30px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: linear-gradient(#b5d3d6 60%, #fff); 
  background-repeat: no-repeat;
}
.stage {
  position: absolute;
  width: 400px;
  height: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-40%) scale(.7);
}

.jar {
  position: absolute;
   opacity:.8;
  left: 0;
  bottom: -30px;
  width: 400px;
  height: 420px;
  background: #e7e7e7;
  background-image: linear-gradient(90deg, #a8a8a8 0, #a9a9a9 12%, #aeaeae 13%, #eeeeee 30%, #f5f5f5 70%, #d3d3d3 98%);
  border-radius: 5%/60%;
  transform: perspective(20px) rotateX(-1deg);
  z-index: 1;
   
  
  &:before {
    content: "";
    position: absolute;
    width: 380px;
    height: 80px;
    background: #e7e7e7;
    background-image: linear-gradient(90deg, #424242 0, #909090 10%, #a8a8a8 20%, #a8a8a8 25%, #ababab 25%, #f8f8f8 30%, #e7e7e7 32%, #e7e7e7 70%, #a8a8a8 80%, #424242 95%);
    border-radius: 50%;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
        inset 0 2px 0 0 #fbfbfb,
        inset 0 1px 0 0 #e6e6e6,
        inset 4px -20px 20px 0 rgba(0,0,0,.2);
    top: -40px;
  }
  
  &:after {
    content: "";
    position: absolute;
    width: 380px;
    height: 200px;
    background: #e7e7e7;
    border-radius: 50%;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: -75px;
    box-shadow:  
      inset 0 5px 0 0 rgba(0,0,0,.2),
      inset 50px 30px 25px 0 rgba(0,0,0,.2),
      inset -20px -10px 15px 0 rgba(0,0,0,.1),
      0 20px 30px -10px rgba(0,0,0,.5)
     ;
  }
}

.jar-ring {
  border-bottom: 2px solid #fff;
  box-shadow: 0 10px 0 0 #fff,
    0 11px 1px 0 rgba(0,0,0,.3);
  top: -4px;
  border-radius: 50%;
  width: 465px;
  position: absolute;
  height: 120px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);

}

.contains {
  position: absolute;
  width: 445px;
  height: 420px;
  top: -172px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  
  .glas {
    position: absolute;
    opacity: .5;
    left: 30px;
    top: 350px;
    width: 380px;
    height: 350px;
      background: #e7e7e7;
      background-image: linear-gradient(90deg, #a8a8a8 0, #a9a9a9 12%, #aeaeae 13%, #eeeeee 30%, #f5f5f5 70%, #d3d3d3 98%); 
    border-radius: 5%/100%;
    transform: perspective(18px) rotateX(-1deg);
    z-index: 1;
    
      &:before {
      content: "";
      position: absolute;
      width: 380px;
      height: 50px;
      background: #e7e7e7;
      background-image: linear-gradient(90deg, #a8a8a8 0, #a9a9a9 12%, #aeaeae 13%, #eeeeee 30%, #f5f5f5 70%, #d3d3d3 98%); 
      z-index: 1;
      left: 50%;
      transform: translateX(-50%);
      top: -48px;
      clip-path: polygon(50% 60%, 80% 50%, 100% 0, 100% 50%, 100% 100%, 50% 100%, 2% 100%, 2% 50%, 2% 10%, 20% 50%);

}

&:after {
      content: "";
      position: absolute;
      width: 380px;
      height: 200px;
      background: #e7e7e7;
      background-image: linear-gradient(90deg, #a8a8a8 0, #a9a9a9 12%, #aeaeae 13%, #eeeeee 30%, #f5f5f5 70%, #d3d3d3 98%); 
      border-radius: 50%;
      z-index: 1;
      left: 50%;
      transform: translateX(-50%);
      bottom: -75px;
      box-shadow:  0 20px 30px -10px rgba(0,0,0,.5);
    }
  }

}

.pencil {
  width: 56px;
  height: 454px;
  position: absolute;
  left: 280px;
  top: 150px;
  transform: rotate(5deg) scale(1.2);
  
  div {
    position: relative;
  }
  
  .eraser {
    height: 35px;
    width: 100%;
    background: #be7861; 
    border-radius: 10px 10px 0 0;
    background-image: linear-gradient(90deg,
      #c07963 0, #c07963 20px, #d19580 30px,
      #c5826d 40px, #ba7057 40px, #a44a30 50px,
      rgba(0,0,0,.4) 100%
    );
    box-shadow: 
      inset 0 -2px 0 0 #7b2b2c,
      inset 0 -3px 0 0 rgba(255,255,255,.2);    
  }
  
  .ring {
    width: 100%;
    height: 45px;
    background: #bbc2b2;
    background-image: linear-gradient(90deg,
      #7fa1a0 0, #acc0b5 11px, #fff 11px, #fff 13px,
      #b2c3b7 13px, #7e7962 43px, #6b6550 43px, #6b6550 45px,
      #7b7356 45px, #7d6d50 50px, rgba(0,0,0,.6) 100%);
    box-shadow: 
      inset 0 4px 0 0 #e7f3ed,
      inset 0 6px 0 0 #756c63,
      inset 0 10px 0 0 #e7f3ed,
      inset 0 -4px 0 0 #e7f3ed,
      inset 0 -6px 0 0 #756c63,
      inset 0 -10px 0 0 #e7f3ed;
  }
  
  .body {
    position: relative;
    width: 30px;
    height: 300px;
    transform: translate(13px,0);
    border-radius: 0  0 15px 15px;
    box-shadow: inset 0 2px 0 0 #a14504;
    background: #eda10c;
    background-image: linear-gradient(90deg, #ec9909 0, #eda10c 90%);      
    z-index: 2;
    
    span {
      position: absolute;
      font-size: 14px;
      z-index: 3;
      text-align: left;
      transform-origin: 0 0;  
      transform: rotate(-90deg);
      white-space: nowrap;
      height: 30px;
      width: 300px;
      line-height: 30px;
      top: 140px;
      left: 1px;
      color: #a14504;
      text-shadow: -1px -1px 0px rgba(0,0,0,.2), 1px 1px 0px rgba(255,255,255,.4);
    }
    
    &:before, &:after {
      position: absolute;
      content: "";
      display: block;
      height: 300px;
      width: 13px;     
      box-shadow: inset 0 2px 0 0 #a14504,
        inset 2px 0 0 rgba(255,255,255,.2),
        inset -2px 0 0 rgba(255,255,255,.5);        
    }
    
    &:before {
      background: #edbc62;
      background-image: linear-gradient(90deg, #d9810d 0, #eda10c 90%);      
      left: -13px;
      border-radius: 0 0 13px 5px;
    }
    
    &:after {
      background: #e6980a;
      background-image: linear-gradient(90deg, #d9810d 0, #e7980a 90%);
      right: -13px;
      border-radius: 0 0 5px 13px;
    }
    
  }
  
  .wood {
    z-index: 1;
    width: 100%;
    height: 56px;
    background: #d2af76;
    background-image: linear-gradient(#f3e4ca 0, #f3e4ca 3px, #d9bb8b 13px, #cba15c 40px, #deb16b 50px, rgba(0,0,0,.2) 100%);
    transform: rotate(-90deg) translate(12px,0);
    clip-path: polygon(45px 0, 100% 0, 100% 100%, 45px 100%, -15px 50%);
  }
  
  .tip {
    background: #0f1012;  
    width: 30px;
    height: 18px;
    transform: rotate(-90deg) translate(12px,13px);    
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
}

.pencil + .pencil {
  left: 340px;
  transform: rotate(195deg) scale(1.2);
  
  
  .body {
    background: #eb370d;
    background-image: linear-gradient(90deg, #eb370d 0, #e83a0c 90%);
    box-shadow: inset 0 2px 0 0 rgba(0,0,0,.3),
        inset 2px 0 0 rgba(255,255,255,.2);      
    
    span {
      color: #77170f;
    }
    
    &:after {
      background: #da1e0e;
      background-image: linear-gradient(90deg, #da1e0e 0, #a52822 90%);      
    }
    
    &:before {
      background: #f06347;
      background-image: linear-gradient(90deg, #ef451f 0, #e6755f 90%);      
    }
  } 
}

.ruler {
  box-shadow: inset -3px 0 0 0 rgba(0,0,0,.5);
  position: absolute;
  width: 480px;
  height: 115px;
  background: #ce9e32;
  background-image:
    linear-gradient(0, rgba(255,255,255,.14) 50%, transparent 50%),
    linear-gradient(0, rgba(255,255,255,.014) 50%, transparent 50%),
    linear-gradient(0, transparent 50%, rgba(255,255,255,.01) 50%),
    linear-gradient(0, transparent 50%, rgba(255,255,255,.1) 50%),
    linear-gradient(0, #5d3b19 0, #d7a936 10%, #84511e 90%);
    background-size: 45px, 50px, 30px, 20px, 100%;
  transform: perspective(500px) rotateX(1deg) rotate(-105deg) scale(1.3);
  left: -120px;
  top: 290px;
  
  &:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    height: 30px; 
    width: 30px;
    background: #b5d3d6;
    bottom: 50px;
    left: 88%;
    box-shadow: inset 0 -4px 0 0 #594127;
    
  }
  
  .scale {
    box-shadow: 
      inset -2px 0 0 0 rgba(0,0,0,.3),
      inset 0 5px 0 0 #cbcbcb;
      ;
    width: 30px;
    background: #cbcbcb;
    position: absolute;
    bottom: 0;
    width: 100%;
    @include ruler-background(#cbcbcb,#696969,#696969);
  }
}

HTML

css pencil with eraser

css, 文具

编辑器支持Emmet

快捷键

css pencil with eraser

css, 文具

纯CSS构建三维版本的金刚（人猿泰山）透明模型

HTML5 CSS3模拟透过脏玻璃（窗户）看室外景色的特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：