div+css实现彩色铅笔排列布局效果代码-html代码-BFW代码库

div+css实现彩色铅笔排列布局效果代码

代码语言：html

代码描述：div+css实现彩色铅笔排列布局效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.pencil {
  --w: 40px;
  --h: 300px;
  --clr: hsl(calc(360deg / 20 * var(--c)) 100% 50%);
  --tip-ang: 45deg;
  --tip-clr: hsl(25 75% 85%);
  --base-ang: 20deg;
 
  width: var(--w);
  height: var(--h);
  -webkit-box-reflect: below -10px linear-gradient(#0000 50%, #0004);
  background: 
    conic-gradient(at 100% 100%, #0000 calc(270deg + var(--base-ang)), var(--mix-blk) 0) 0 100% / var(--con-s),
    linear-gradient(var(--clr) 0 0) 50% 100% / 50% var(--shaft-h),
    conic-gradient(at 0 100%, var(--mix-wht) calc(90deg - var(--base-ang)), #0000 0) 100% 100% / var(--con-s),
    
    radial-gradient(100% 100%, var(--mix-blk) 50%, #0000 0) var(--neg-qtr-w) var(--tip-h) / var(--rad-s),
    radial-gradient(100% 100%, var(--clr) 50%, #0000 0) 50% var(--tip-h) / var(--rad-s),
    radial-gradient(100% 100%, var(--mix-wht) 50%, #0000 0) var(--three-qtr-w) var(--tip-h) / var(--rad-s),
    
    conic-gradient(from var(--grad-ang) at 50% 0, var(--mix-wht), var(--clr), var(--mix-blk) var(--tip-ang), #0000 0) 0 0 / 100% calc(var(--tip-h) / 3),
    conic-gradient(from var(--grad-ang) at 50% 0, var(--mix-tip-wht), var(--tip-clr), var(--mix-tip-blk) var(--tip-ang), #0000 0) 0 0 / 100% calc(var(--tip-h) + calc(var(--w) * .25));
  background-repeat: no-repeat;
  
  --tip-h: calc((var(--w) / 2) * tan(90deg - var(--tip-ang) / 2));
  --shaft-h: calc(100% - var(--tip-h) - var(--w) * .25);
  --half-w: calc(var(--w) * .5);
  --neg-qtr-w: calc(var(--w) * -.25);
  --three-qtr-w: calc(var(--w) * .75);
  --mix-blk: color-mix(in hsl, var(--clr), black 25%);
  --mix-wht: color-mix(in hsl, var(--clr), white 25%);
  --mix-tip-blk: color-mix(in hsl, var(--tip-clr), black 50%);
  --mix-tip-wht: color-mix(in hsl, var(--tip-clr), white 50%);
  --grad-ang: calc(180deg - var(--tip-ang) / 2);
  --rad-s: var(--half-w) var(--half-w);
  -.........完整代码请登录后点击上方下载按钮下载查看