css布局绘制一只铅笔效果代码-html代码-BFW代码库

css布局绘制一只铅笔效果代码

代码语言：html

代码描述：css布局绘制一只铅笔效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  font-size: 1vmin;
  background-color: #00ABC4;
}
body div {
  font-size: 1.45vmin;
  width: 93.5em;
  height: 3.7em;
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: linear-gradient(to right, rgba(183, 99, 9, 0.2), rgba(0, 0, 0, 0.2)) 90% 100%/0.5% 100%, radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 51%, transparent 65%) 0.6% 49%/0.75em 0.4em, linear-gradient(15deg, #00abc4 50%, rgba(0, 0, 0, 0) 51%) 0% 1em/7% 100%, linear-gradient(-15deg, rgba(0, 0, 0, 0) 50%, #00abc4 51%) 0% -1em/7% 100%, radial-gradient(100% 100% at 50% 50%, #eb9d00 50%, rgba(0, 0, 255, 0) 51%) 6.8% 45%/1.7em 1.7em, linear-gradient(-15deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1) 55%, transparent 65%) 0% -1em/7% 100%, linear-gradient(15deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 55%, transparent 65%) 0% 0.3em/7% 100%, linear-gradient(to top, #6a6c6b, #6a6c6b 55%) 0% 20%/2% 100%, linear-gradient(to top, #f3d9bd, #f3d9bd 55%) 0% 50%/7% 100%, linear-gradient(to top, transparent, rgba(255, 255, 255, 0.5), rgba(255, 0, 0, 0) 55%) 97.5% 30%/7.5% 40%, linear-gradient(to top, transparent, rgba(73, 73, 75, 0.6), rgba(2.........完整代码请登录后点击上方下载按钮下载查看