纯css实现圆珠笔效果代码-html代码-BFW代码库

纯css实现圆珠笔效果代码

代码语言：html

代码描述：纯css实现圆珠笔效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">

<style>
    .pen {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 345px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  background: linear-gradient(90deg, rgba(212, 86, 33, 1) 19%, rgba(247, 122, 66, 1) 22%, rgba(247, 122, 66, 1) 24%, rgba(223, 72, 16, 1) 28%, rgba(233, 112, 22, 1) 54%, rgba(254, 201, 147, 1) 57%, rgba(254, 201, 147, 1) 59%, rgba(254, 201, 147, 1) 62%, rgba(244, 173, 89, 1) 65%, rgba(244, 173, 89, 1) 91%)
}


.pen::before {
  content: '';
  position: absolute;
  width: 75px;
  height: 383px;
  top: -20px;
  left: -29px;
  background-image: linear-gradient(#151514, #000000), linear-gradient(90deg, rgba(171, 172, 167, 1) 10%, rgba(192, 196, 190, 1) 13%, rgba(192, 196, 190, 1) 21%, rgba(159, 163, 157, 1) 25%, rgba(197, 198, 193, 1) 56%, rgba(227, 228, 223, 1) 59%, rgba(227, 228, 223, 1) 63%, rgba(227, 228, 223, 1) 66%, rgba(222, 223, 218, 1) 72%, rgba(222, 223, 218, 1) 91%), linear-gradient(90deg, rgba(60, 25, 12, 1) 10%, rgba(142, 97, 84, 1) 13%, rgba(142, 97, 84, 1) 18%, rgba(49, 34, 30, 1) 21%, rgba(49, 34, 30, 1) 57%, rgba(118, 112, 103, 1) 62%, rgba(118, 112, 103, 1) 68%, rgba(118, 112, 103, 1) 74%, rgba(73, 41, 11, 1) 78%, rgba(73, 41, 11, 1) 91%), linear-gradient(90deg, rgba(30, 22, 20, 1) 10%, rgba(142, 97, 84, 1) 13%, rgba(142, 97, 84, 1) 18%, rgba(30, 22, 20, 1) 21%, rgba(30, 22, 20, 1) 51%, rgba(118, 112, 103, 1) 56%, rgba(118, 112, 103, 1) 64%, rgba(118,.........完整代码请登录后点击上方下载按钮下载查看