css实现带橡皮擦铅笔效果代码-html代码-BFW代码库

css实现带橡皮擦铅笔效果代码

代码语言：html

代码描述：css实现带橡皮擦铅笔效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
   body{background-color:#f1f0f3}.container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex}.tip{position:relative;left:27px;top:6px;background-color:#000;-webkit-clip-path:polygon(100% 0,0 50%,100% 100%);clip-path:polygon(100% 0,0 50%,100% 100%);width:14px;height:20px}.wood{position:relative;bottom:20px;left:27px;z-index:2;width:60px;height:72px;background:linear-gradient(to bottom,#f2daad 0,#d1945c 48%,#ab6b35 83%,#86491d 100%);-webkit-clip-path:polygon(40px 0,100% 25%,100% 75%,40px 100%,-15px 50%);clip-path:polygon(40px 0,100% 25%,100% 75%,40px 100%,-15px 50%)}.yellow{position:relative;z-index:4;width:130px;height:32px;background-color:#F3B63D;border-top-left-radius:18px;border-bottom-left-radius:18px}.yellow:before,.yellow:after{display:block;content:'';width:130px;height:20px;border-top-left-radius:12px;border-bottom-left-radius:12px}.yellow:before{position:relative;bottom:20px;background-color:#FEE49B}.yellow:after{position:relative;top:12px;background:linear-gradient(to bottom,#d28927 0,#d28927 40%,#ae641c 100%)}.metal{.........完整代码请登录后点击上方下载按钮下载查看