剪藏#前端嘛#剪藏
兔子？青蛙？（可复制源代码）
2025 年 6 月 22 日 约 1 分钟
📦 拖到文章底部，点击 阅读原文，可一键复制完整源码
JAVASCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>兔子？青蛙？</title>
<link
rel="stylesheet"
href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"
/>
<style>
@import url('https://fonts.googleapis.com/css?family=Sigmar+One');*,*:after,*:before{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}:root{--scribble:hsl(14080%50%);}body{display:grid;font-family:'Sigmar One',cursive;place-items:center;min-height:100vh;}.toggle{height:260px;position:relative;width:320px;z-index:2;opacity:0.65;}.toggle__eye{-webkit-animation:blink 6s -2s infinite;animation:blink 6s -2s infinite;}@-webkit-keyframes blink{0%,46%,48%,50%,100%{scale:11;}47%,49%{scale:10.01;}}@keyframes blink{0%,46%,48%,50%,100%{scale:11;}47%,49%{scale:10.01;}}.toggle__head{height:200px;border:12px solid #000;background:#fff;border-radius:207px170px221px179px/117px115px110px160px;position:absolute;bottom:3px;left:1px;width:312px;z-index:2;}.toggle__ear--left{border:12px solid #000;position:absolute;top:15px;left:2px;height:129px;width:110px;border-radius:66px54px23px82px/54px59px21px76px;}.toggle__ear--right{border:12px solid #000;position:absolute;top:5px;right:25px;height:129px;width:103px;border-radius:40px65px50px50px/42px59px50px50px;}.toggle__ear--clone{border:12px solid transparent;z-index:3;background:#fff;transform:scale(0.79);}.toggle__face{position:absolute;height:100%;width:100%;z-index:4;transform:translate(10px,60px);transition:transform 0.25s ease;}.toggle__mouth{height:12px;width:12px;background:#000;border-radius:100%;position:absolute;top:114px;left:189px;}.toggle__mouth:before{content:'';position:absolute;left:-57px;top:-55px;height:86px;width:69px;border:12px solid #000;border-radius:0031px36px/0018px25px;clip-path:polygon(0100%,100%100%,100%61px,17px57px,063px);-webkit-clip-path:polygon(
0100%,100%100%,100%61px,17px57px,063px
);}.toggle__mouth:after{content:'';height:12px;width:12px;border-radiusJAVASCRIPT
:100%;position:absolute;top:1px;background:#000;left:-56px;}.toggle__eye{border-radius:10px15px10px20px/16px28px14px27px;height:45px;width:30px;background:#000;position:absolute;}.toggle__eye--left{left:47px;top:60px;}.toggle__eye--right{left:228px;top:44px;}.toggle__label{font-size:4rem;line-height:4.25rem;left:105%;position:absolute;top:40%;}.toggle__label:after{content:'';width:100%;height:4.25rem;background:#fff;position:absolute;bottom:0;left:0;transition:transform 0.25s ease;}.toggle__scribble{height:40px;width:181px;background:var(--scribble);position:absolute;top:85px;left:72px;z-index:3;transform:rotate(3deg);transition:background 0.25s ease,-webkit-clip-path 0.24s ease;transition:background 0.25s ease,clip-path 0.24s ease;transition:background 0.25s ease,clip-path 0.24s ease,-webkit-clip-path 0.24s ease;-webkit-clip-path:inset(
0 calc(100% - (var(--active,0) * 100%)) -400%0
);clip-path:inset(0 calc(100% - (var(--active,0) * 100%)) -400%0);}.toggle__scribble:after{content:'';height:40px;background:var(--scribble);position:absolute;width:160px;top:0px;right:-4px;transform-origin:right;transform:skew(-10deg,0) rotate(-18deg);transition:background 0.25s ease,-webkit-clip-path 0.1s0.12s ease;transition:background 0.25s ease,clip-path 0.1s0.12s ease;transition:background 0.25s ease,clip-path 0.1s0.12s ease,-webkit-clip-path 0.1s0.12s ease;-webkit-clip-path:inset(
00 -400% calc(100% - (var(--active,0) * 100%))
);clip-path:inset(00 -400% calc(100% - (var(--active,0) * 100%)));}.toggle__scribble:before{content:'';height:40px;width:120px;top:50px;left:24px;background:var(--scribble);transform-origin:left;position:absolute;transform:skew(23deg,0) rotate(13deg);transition:background 0.25s ease,-webkit-clip-path 0.12s0.26s ease;transition:background 0.25s ease,clip-path 0.12s0.26s ease;transition:background 0.25s ease,clip-path 0.12s0.26s ease,-webkit-clip-path 0.12s0.26s ease;-webkit-clip-path:inset(
0 calc(100% - (var(--aJAVASCRIPT
ctive,0) * 100%)) -400%0
);clip-path:inset(0 calc(100% - (var(--active,0) * 100%)) -400%0);}input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;}label:is(:hover).toggle__label{text-decoration:underline;}input:checked + label.toggle.toggle__face{transform:translate(0,0);}input:checked + label.toggle.toggle__label:after{transform:translate(0,-100%);}input:checked + label.toggle.toggle__scribble,input:checked + label.toggle.toggle__scribble:after,input:checked + label.toggle.toggle__scribble:before{--active:1;}svg{display:none;}@media (prefers-reduced-motion:no-preference){.toggle{-webkit-animation:scribble 0.2s infinite;animation:scribble 0.2s infinite;}}@-webkit-keyframes scribble{0%{filter:url('#scribble--0');}25%{filter:url('#scribble--1');}50%{filter:url('#scribble--2');}75%{filter:url('#scribble--3');}100%{filter:url('#scribble--4');}}@keyframes scribble{0%{filter:url('#scribble--0');}25%{filter:url('#scribble--1');}50%{filter:url('#scribble--2');}75%{filter:url('#scribble--3');}100%{filter:url('#scribble--4');}}</style>
</head>
<body>
<input type="checkbox" id="toggle" />
<label for="toggle"><div class="toggle"><div class="toggle__head"></div><div class="toggle__ear toggle__ear--left"></div><div class="toggle__ear toggle__ear--right"></div><div class="toggle__ear toggle__ear--left toggle__ear--clone"></div><div class="toggle__ear toggle__ear--right toggle__ear--clone"></div><div class="toggle__face"><div class="toggle__eyes"><div class="toggle__eye toggle__eye--left"></div><div class="toggle__eye toggle__eye--right"></div></div><div class="toggle__mouth"></div></div><div class="toggle__label">BUN<br/>FROG</div><div class="toggle__scribble"></div></div><svg><filter id="scribble--0"><feturbulence basefrequency="0.02"numoctaves="3"result="noise"seed="0"></feturbJAVASCRIPT
ulence><fedisplacementmap id="displacement"in="SourceGraphic"in2="noise"scale="2"></fedisplacementmap></filter><filter id="scribble--1"><feturbulence basefrequency="0.02"numoctaves="3"result="noise"seed="1"></feturbulence><fedisplacementmap in="SourceGraphic"in2="noise"scale="3"></fedisplacementmap></filter><filter id="scribble--2"><feturbulence basefrequency="0.02"numoctaves="3"result="noise"seed="2"></feturbulence><fedisplacementmap in="SourceGraphic"in2="noise"scale="2"></fedisplacementmap></filter><filter id="scribble--3"><feturbulence basefrequency="0.02"numoctaves="3"result="noise"seed="3"></feturbulence><fedisplacementmap in="SourceGraphic"in2="noise"scale="3"></fedisplacementmap></filter><filter id="scribble--4"><feturbulence basefrequency="0.02"numoctaves="3"result="noise"seed="4"></feturbulence><fedisplacementmap in="SourceGraphic"in2="noise"scale="2"></fedisplacementmap></filter></svg></label>
</body>
</html>【在线预览/一键复制源代码】点击下方👇🏻 阅读原文