css布局实现一个机械铅笔效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个机械铅笔效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
    height: 98vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    z-index: 0;
}

:root {
    --speed: 20s;
}

body * {
    position: absolute;
    content: "";
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
    width: 900px;
    /* background-color: #f3bcbc42; */
    z-index: 1;
}

.mid {
    height: 30px;
    width: 300px;
    background-color: #414141;
    position: absolute;
    top: 0;
    left: -230px;
    z-index: 1;
    overflow: hidden;
}

.mid::after {
    content: "";
    width: 10px;
    height: inherit;
    background-color: #d1d1d1;
    top: 0;
    right: 0;
    position: absolute;
}

.mid::before {
    content: "";
    z-index: 2;
    width: 10px;
    height: 3px;
    background-color: #4b4b4b;
    top: 25px;
    right: 0;
    position: absolute;
    filter: blur(1px);
}

.color-effect {
    height: 30px;
    width: 290px;
    background: linear-gradient(to bottom, #ecffeffb, transparent);
    filter: blur(3px);
}

.shine-1 {
    height: 2px;
    width: 320px;
    background-color: rgb(41, 41, 41);
    filter: blur(1.4px);
    top: 2px;
    z-index: 1;
}

.shine-2 {
    height: 2px;
    width: inherit;
    background-color: #ffffff;
    top: 3px;
    filter: blur(12px);
    z-index: 1;
}

.shine-3 {
    height: 9px;
    width: inherit;
    background-color: #e9e9e9;
    top: 12px;
    filter: blur(2px);
    z-index: 1;
}

.shine-4 {
    height: 2px;
    width: inherit;
    background-color: #d1d1d1;
    bottom: 4px;
    filter: blur(2px);
    z-index: 1;
}

.shine-5 {
    height: 3px;
    width: 320px;
    background-color: #000;
    filter: blur(3px);
    bottom: 2px;
    z-index: 1;
}

.grip {
    height: 32px;
    width: 90px;
    background-color: #414141;
    background: linear-gradient( to bottom, #8f8f8f, #6e6e6e, #585858, #4d4d4d, #3b3b3b);
    top: -1;
    left: 70px;
    border-radius: 4px 4px 4px 4px;
    /* overflow: hidden; */
}

.layer {
    height: 36px;
    width: 5px;
    background: linear-gradient(to right, #474747 50%, #999999);
    border-radius: 40%;
    top: -2px;
    filter: blur(0.7px);
}

.layer-1 {
    left: 0px;
}

.layer-2 {
    left: 8px;
}

.layer-3 {
    left: 16px;
}

.layer-4 {
    left: 24px;
}

.layer-5 {
    left: 32px;
}

.layer-6 {
    left: 40px;
}

.layer-7 {
    left: 48px;
}

.layer-8 {
    left: 56px;
}

.layer-9 {
    left: 64px;
}

.layer-10 {
    left: 72px;
}

.layer-11 {
    left: 80px;
}

.nib {
    background-color: transparent;
    height: 30px;
    width: 60px;
    left: 160px;
}

.part {
    border-left: 1px solid #c0c0c0;
}

.part-1 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    height: 30px;
    width: 8px;
    border: none;
}

.part-2 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    height: 30px;
    width: 10px;
    left: 8px;
}

.part-3 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    height: 20px;
    width: 15px;
    left: 19px;
    top: 5px;
}

.part-4 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
    height: 12px;
    width: 15px;
    left: 34px;
    top: 9px;
}

.part-5 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    height: 4px;
    width: 6px;
    left: 49px;
    top: 13px;
}

.lead {
    height: 2px;
    width: 0px;
    /* width: 200px; */
    background: linear-gradient(to bottom, #bdbdbd, #333333);
    left: 55px;
    top: 14px;
    /* top: 30px; */
    animation: enlargeLead var(--speed) linear forwards;
    transform-origin: left;
}

@keyframes enlargeLead {
    99.9% {
        top: 14px;
        width: 200px;
    }
    100% {
        top: 30px;
        width: 200px;
    }
}

.break {
    height: 2px;
    width: 2px;
    background-color: rgb(253, 253, 253);
    left: 70px;
    /* top: -10px; */
    animation: break var(--speed) linear forwards;
    opacity: 0;
}

@keyframes break {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.end {
    height: 20px;
    width: 30px;
    background: linear-gradient( to bottom, rgb(218, 218, 218) 1%, #5f5f5f 10%, rgb(131, 131, 131) 60%, #1f1f1f 80%, rgb(231, 231, 231) 100%);
    top: 5px;
    left: -260px;
    border-radius: 5px 0 0 5px;
    animation: moveEnd 0.5s linear forwards 40;
}

@keyframes moveEnd {
    50% {
        left: -245px;
    }
    100% {
        left: -260px;
    }
}

.clip {
    height: 34px;
.........完整代码请登录后点击上方下载按钮下载查看