js+css实现本地图片转彩铅风格代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现本地图片转彩铅风格代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark" />
<title>彩铅工坊 · 照片变彩色铅笔画</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#f2b134; --red:#e2543e; --green:#5f9e63; --blue:#5b87b5; --brown:#a9825a; --teal:#4a9b9b;
  --tx:#efe8d8; --tx-dim:#b3a992;
  --panel:rgba(255,255,255,.05); --panel-b:rgba(255,255,255,.09);
  --paper:#fbf7ec;
}
::selection{background:var(--gold);color:#33270f}
html,body{min-height:100%}
body{
  font-family:'Noto Sans SC',system-ui,sans-serif;color:var(--tx);overflow-x:hidden;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(242,177,52,.08), transparent 60%),
    radial-gradient(820px 480px at 108% 112%, rgba(226,84,62,.06), transparent 62%),
    repeating-linear-gradient(48deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#28231c,#1d1a14 70%);
  background-attachment:fixed;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.shaving{position:fixed;z-index:0;opacity:.13;pointer-events:none;animation:floaty 9s ease-in-out infinite}
.shaving.s2{animation-duration:13s;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(6deg)}}

header{position:relative;z-index:2;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 6px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(145deg,#332a1f,#241f17);border:1px solid rgba(255,255,255,.13);
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
h1{font-family:'Ma Shan Zheng',cursive;font-weight:400;font-size:clamp(1.9rem,4.2vw,2.8rem);line-height:1;
  display:inline-block;padding:.06em .3em .14em;color:#33270f;border-radius:6px;transform:rotate(-1.4deg);
  background:linear-gradient(100deg,#f6bd4a,#eda22c);box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.tag{font-size:.76rem;color:var(--tx-dim);letter-spacing:.22em;margin-top:7px}
.pencil-strip{display:flex;gap:8px;align-items:flex-end;margin-left:auto;padding-bottom:8px}
.pencil{width:80px;height:13px;box-shadow:0 3px 6px rgba(0,0,0,.35);transform:rotate(var(--r,0deg));
  transition:transform .25s;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
  background:linear-gradient(90deg,#d98a80 0 7px,#c9c2b4 7px 15px,var(--c) 15px calc(100% - 24px),
    #e8c9a0 calc(100% - 24px) calc(100% - 10px),#4a4238 calc(100% - 10px) 100%)}
.pencil:hover{transform:rotate(0deg) translateY(-5px)}
.badge{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--tx-dim);
  border:1px solid var(--panel-b);padding:7px 13px;border-radius:99px;background:var(--panel)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(95,158,99,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(95,158,99,0)}100%{box-shadow:0 0 0 0 rgba(95,158,99,0)}}

main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;
  align-items:start;max-width:1280px;margin:0 auto;padding:22px clamp(16px,4vw,40px) 26px}

.paper-frame{position:relative;background:var(--paper);border-radius:5px;transform:rotate(-.4deg);
  padding:clamp(10px,1.6vw,16px);box-shadow:0 24px 60px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.35)}
.paper-frame::before{content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.tape{position:absolute;width:96px;height:27px;z-index:6;box-shadow:0 2p.........完整代码请登录后点击上方下载按钮下载查看