猫选择器🐈
2026-01-13
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>一只可爱的猫选择器</title>
<style>
.sour-gummy-100 {
font-family: "Sour Gummy", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
.cat {
select,
::picker(select) {
appearance: base-select;
font-size: 18px;
}
select {
min-width: 400px;
padding: 16px;
border-radius: 8px;
min-height: 58px;
background-color: white;
cursor: pointer;
&:hover {
background-color: yellow;
}
}
::picker(select) {
border-radius: 0px 0px 8px 8px;
border-top: none;
}
::picker-icon,
::checkmark {
display: none;
}
[hidden] {
display: none;
}
option {
padding: 0px;
padding-left: 20px;
padding-right: 10px;
&:hover {
background: yellow;
}
display: flex;
justify-content: space-between;
}
.sleep-symbol {
margin-left: 260px;
font-weight: 600;
margin-bottom: -40px;
span {
position: relative;
display: inline-block;
opacity: 1;
transform: scale(1);
animation: sleep 4s ease-in-out infinite;
}
span:nth-child(1) {
animation-delay: 0s;
}
span:nth-child(2) {
animation-delay: 1s;
margin-left: -10px;
}
span:nth-child(3) {
animation-delay: 2s;
margin-left: -10px;
}
}
.thecat {
z-index: 2;
margin-left: 220px;
margin-bottom: -62px;
position: relative;
pointer-events: none;
}
}
#tail {
visibility: visible;
}
#longtail {
visibility: hidden;
}
option {
svg {
margin-right: -3px;
}
}
/* activate cat when mouse approaches! */
.mouse-detector {
padding: 20px 30px 30px 30px;
&:hover {
#lefteyelid {
visibility: hidden;
}
.sleep-symbol {
visibility: hidden;
}
}
}
.cat {
padding: 30px;
&:hover {
#righteyelid {
visibility: hidden;
}
}
}
.thecat {
#eyesdown {
visibility: hidden;
}
}
.cat:has(.side-select:hover) {
#eyesdown {
visibility: visible;
}
}
select:open {
border-radius: 8px 8px 0px 0px;
}
.cat:has(option:hover) {
#righteyelid,
#lefteyelid,
.sleep-symbol {
visibility: hidden;
}
#eyesdown {
visibility: visible;
}
}
/* auto-cat tail assist */
selectedcontent {
svg {
display: none;
visibility: hidden;
}
}
.cat:has(option:hover) {
#tail {
visibility: hidden;
}
#longtail {
visibility: visible;
}
}
option:has(~ option:hover) {
#tailpiece {
visibility: visible;
}
}
option {
min-height: 48px;
&:hover {
#endpiece {
visibility: visible;
}
}
#tailpiece {
visibility: hidden;
}
#endpiece {
visibility: hidden;
}
}
.instructions {
color: #444;
}
body {
margin: 0;
width: 100%;
padding: 0;
display: flex;
height: 100vh;
align-items: center;
flex-direction: column;
font-family: "Sour Gummy";
background-color: #ccc;
}
@keyframes sleep {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
50% {
opacity: 0.5;
transform: translate(-5px, -35px) scale(1.2);
}
100% {
opacity: 0;
transform: translateY(-60px) scale(1.5);
}
}
</style>
</head>
<body>
<div class="mouse-detector">
<div class="cat">
<div class="sleep-symbol">
<span>Z</span>
<span>z</span>
<span>z</span>
</div>
<div class="thecat">
<svg
width="45.952225mm"
height="35.678726mm"
viewBox="0 0 45.952225 35.678726"
version="1.1"
id="svg1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs id="defs1" />
<g
id="layer1"
style="display: inline"
transform="translate(-121.80376,-101.90461)"
>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 144.95859,104.74193 c 6.01466,-2.1201 14.02915,-0.85215 17.62787,2.77812 3.59872,3.63027 2.91927,7.6226 -0.0661,11.80703 -2.98542,4.18443 -9.54667,3.58363 -15.1474,3.43959 -5.60073,-0.14404 -10.30411,-0.0586 -11.67474,-3.9026 7.85671,-2.22341 3.24576,-12.00205 9.26042,-14.12214 z"
id="path1"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 156.30732,121.30486 c 0,0 -3.82398,2.52741 -4.14054,3.7997 -0.31656,1.2723 0.31438,2.18109 0.95701,2.55128 0.64264,0.3702 1.59106,-0.085 2.13559,-0.75306 0.54452,-0.6681 1.5629,-2.25488 2.47945,-3.20579 0.91654,-0.95091 2.96407,-2.74361 2.96407,-2.74361 l 0.73711,-3.60348 z"
id="path2"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 136.93356,123.08347 c 0,0 -3.20149,3.2804 -3.24123,4.59088 -0.0397,1.31049 0.60411,1.83341 1.3106,2.05901 0.7065,0.22559 1.60304,-0.55255 1.99363,-1.32084 0.39056,-0.76832 1.14875,-2.30337 2.04139,-3.29463 0.89264,-0.99126 3.37363,-3.37561 3.37363,-3.37561 l -1.30007,-3.61169 z"
id="path3"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 130.12859,121.60522 c -2.15849,1.92962 -3.38576,3.23532 -3.61836,4.5256 -0.23257,1.2903 0.0956,1.80324 0.76105,2.13059 0.66549,0.32733 1.66701,-0.31006 2.16665,-1.01233 0.49961,-0.70231 1.04598,-1.14963 2.83575,-3.05671 1.78977,-1.90708 5.91823,-3.27102 5.91823,-3.27102 l -0.75313,-3.99546 c 0,0 -5.15171,2.7497 -7.31019,4.67933 z"
id="path4"
/>
<path
id="path5"
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.292536;
stroke-linecap: round;
stroke-linejoin: round;
stroke-opacity: 0.988235;
"
d="m 147.59927,113.85404 c 0.68896,4.40837 -4.04042,7.93759 -10.51533,8.9455 -6.47491,1.00791 -12.24344,-0.88717 -12.9324,-5.29555 -0.68895,-4.40838 3.44199,-9.94186 9.9169,-10.94977 6.47491,-1.0079 12.84186,2.89144 13.53083,7.29982 z"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 126.36446,111.82609 c 0,0 -2.37067,-6.28072 -0.86724,-7.10855 1.50342,-0.82783 5.87139,3.72617 5.87139,3.72617 z"
id="path6"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 143.50182,108.85407 c 0,0 -0.0544,-6.71302 -1.75519,-6.94283 -1.70081,-0.22982 -4.13211,5.59314 -4.13211,5.59314 z"
id="path7"
/>
<g id="g25" style="display: inline">
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 125.27102,116.06007 -2.97783,-1.05373"
id="path8"
/>
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 124.91643,116.80991 -2.84808,0.0754"
id="path9"
/>
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 124.97798,118.00308 -2.53111,0.5156"
id="path10"
/>
</g>
<g
id="g13"
transform="rotate(-23.188815,49.755584,71.047761)"
style="display: inline; fill: none; stroke: #000000"
>
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 121.77448,146.87682 3.00963,-0.95912"
id="path11"
/>
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 122.10521,147.63749 2.84427,0.16537"
id="path12"
/>
<path
style="
fill: none;
stroke: #000000;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 122.00599,148.82812 2.51354,0.59531"
id="path13"
/>
</g>
<ellipse
style="
display: inline;
fill: #ffffff;
stroke: none;
stroke-width: 0.56967;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="path14"
cx="142.61723"
cy="108.6707"
rx="3.0261719"
ry="3.0757811"
transform="rotate(1.8105864)"
/>
<ellipse
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.597086;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse15"
cx="112.57543"
cy="138.29808"
rx="1.0380507"
ry="1.3097118"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
display: inline;
fill: #f9f9f9;
fill-opacity: 1;
stroke: none;
stroke-width: 0.184905;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse16"
cx="112.70263"
cy="137.817"
rx="0.32146212"
ry="0.40558979"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
display: inline;
fill: #ffffff;
stroke: none;
stroke-width: 0.56967;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse17"
cx="135.40735"
cy="110.12592"
rx="3.0261719"
ry="3.0757811"
transform="rotate(1.8105864)"
/>
<ellipse
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.597086;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse18"
cx="105.22613"
cy="138.07497"
rx="1.0380507"
ry="1.3097118"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
display: inline;
fill: #f9f9f9;
fill-opacity: 1;
stroke: none;
stroke-width: 0.184905;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse19"
cx="105.35332"
cy="137.59389"
rx="0.32146212"
ry="0.40558979"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<path
style="
display: inline;
fill: #000000;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 163.77708,109.27292 c 4.36563,2.71198 4.26447,17.63497 3.70417,21.03437 -0.5603,3.3994 -1.86906,4.06275 -4.53099,4.49791 -5.87463,0.96037 -8.39724,-5.87134 -5.7547,-5.72161 2.64254,0.14973 3.15958,3.46446 5.95314,2.05052 2.79356,-1.41394 -1.42214,-13.46068 -1.42214,-13.46068 z"
id="tail"
/>
<path
style="
display: inline;
fill: #000000;
stroke: none;
stroke-width: 0.264583;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 159.74981,121.34445 c 0,0 -2.98896,3.47517 -2.94624,4.78555 0.0427,1.31039 0.89775,2.01247 1.61702,2.1932 0.71928,0.18075 1.50745,-0.51603 1.84897,-1.30735 0.34149,-0.79135 0.88811,-2.59584 1.51032,-3.76081 0.62219,-1.16497 2.10268,-3.44845 2.10268,-3.44845 l -0.27441,-3.66785 z"
id="path20"
/>
<g id="lefteyelid" style="display: inline">
<ellipse
style="
fill: #000000;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="path21"
cx="131.94429"
cy="114.29948"
rx="3.1571214"
ry="3.2155864"
/>
<path
style="
fill: #000000;
fill-opacity: 1;
stroke: #ffffff;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 129.32504,114.80228 c 2.54908,-1.14592 4.60706,-0.65481 4.60706,-0.65481"
id="path22"
/>
</g>
<g id="righteyelid" style="display: inline">
<ellipse
style="
fill: #000000;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse22"
cx="139.07704"
cy="113.0834"
rx="3.1571214"
ry="3.2155864"
/>
<path
style="
fill: #000000;
fill-opacity: 1;
stroke: #ffffff;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 136.48089,113.70683 c 2.48528,-1.2784 4.56624,-0.89621 4.56624,-0.89621"
id="path23"
/>
</g>
<g id="eyesdown">
<ellipse
style="
fill: #ffffff;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="path26"
cx="139.12122"
cy="113.61373"
rx="1.8686198"
ry="2.0422525"
/>
<ellipse
style="
fill: #000000;
stroke: none;
stroke-width: 0.597086;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse25"
cx="112.24622"
cy="139.77037"
rx="1.0380507"
ry="1.3097118"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
fill: #f9f9f9;
fill-opacity: 1;
stroke: none;
stroke-width: 0.184905;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse26"
cx="112.37342"
cy="139.28929"
rx="0.32146212"
ry="0.40558979"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
fill: #ffffff;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse27"
cx="131.994"
cy="114.92011"
rx="1.8686198"
ry="2.0422525"
/>
<ellipse
style="
fill: #000000;
stroke: none;
stroke-width: 0.597086;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse28"
cx="105.00267"
cy="139.64998"
rx="1.0380507"
ry="1.3097118"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
<ellipse
style="
fill: #f9f9f9;
fill-opacity: 1;
stroke: none;
stroke-width: 0.184905;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
id="ellipse29"
cx="105.12987"
cy="139.1689"
rx="0.32146212"
ry="0.40558979"
transform="matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)"
/>
</g>
<path
id="longtail"
style="
display: inline;
fill: #000000;
fill-opacity: 1;
stroke: none;
stroke-width: 0.529167;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: none;
stroke-opacity: 0.988235;
"
d="m 164.24062,110.09354 -2.10788,6.5381 c 0,0 0.84017,12.88397 0.35269,20.95169 h 4.78291 c 0.83489,-8.63528 0.13334,-24.78453 -3.02772,-27.48979 z"
/>
</g>
</svg>
</div>
<select class="side-select">
<button>
<selectedcontent></selectedcontent>
</button>
<option value="" hidden>
<span>需要多少<strong>喵</strong>？</span>
</option>
<option value="little">
<span>🐾 一点点</span>
<svg
xml:space="preserve"
width="49.987"
height="48"
viewBox="0 0 13.226 12.7"
>
<g
fill="#000"
fill-opacity="1"
stroke="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".988"
display="inline"
transform="translate(-114.596 -144.523)"
>
<path
id="endpiece"
stroke-width=".529"
d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z"
display="inline"
/>
<path
id="tailpiece"
stroke-width=".753"
d="M123.041 144.523h4.781v12.7h-4.781z"
/>
</g>
</svg>
</option>
<option value="morethanalittle">
<span>🐾 多一点</span>
<svg
xml:space="preserve"
width="49.987"
height="48"
viewBox="0 0 13.226 12.7"
>
<g
fill="#000"
fill-opacity="1"
stroke="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".988"
display="inline"
transform="translate(-114.596 -144.523)"
>
<path
id="endpiece"
stroke-width=".529"
d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z"
display="inline"
/>
<path
id="tailpiece"
stroke-width=".753"
d="M123.041 144.523h4.781v12.7h-4.781z"
/>
</g>
</svg>
</option>
<option value="good">
<span>🐾 多多的</span>
<svg
xml:space="preserve"
width="49.987"
height="48"
viewBox="0 0 13.226 12.7"
>
<g
fill="#000"
fill-opacity="1"
stroke="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".988"
display="inline"
transform="translate(-114.596 -144.523)"
>
<path
id="endpiece"
stroke-width=".529"
d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z"
display="inline"
/>
<path
id="tailpiece"
stroke-width=".753"
d="M123.041 144.523h4.781v12.7h-4.781z"
/>
</g>
</svg>
</option>
<option value="large">
<span>🐾 很多</span>
<svg
xml:space="preserve"
width="49.987"
height="48"
viewBox="0 0 13.226 12.7"
>
<g
fill="#000"
fill-opacity="1"
stroke="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".988"
display="inline"
transform="translate(-114.596 -144.523)"
>
<path
id="endpiece"
stroke-width=".529"
d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z"
display="inline"
/>
<path
id="tailpiece"
stroke-width=".753"
d="M123.041 144.523h4.781v12.7h-4.781z"
/>
</g>
</svg>
</option>
<option value="max">
<span>⭐ 最多喵！⭐</span>
<svg
xml:space="preserve"
width="49.987"
height="48"
viewBox="0 0 13.226 12.7"
>
<g
fill="#000"
fill-opacity="1"
stroke="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-opacity=".988"
display="inline"
transform="translate(-114.596 -144.523)"
>
<path
id="endpiece"
stroke-width=".529"
d="M123.03 144.523c-.16 4.227-.609 7.58-1.632 7.915-2.976.975-2.985-2.38-5.574-2.928s-1.13 6.587 4.822 6.527c2.697-.027 4.356-.485 6.218-5.348.442-1.154.766-3.398.958-6.166z"
display="inline"
/>
<path
id="tailpiece"
stroke-width=".753"
d="M123.041 144.523h4.781v12.7h-4.781z"
/>
</g>
</svg>
</option>
</select>
</div>
</div>
<div class="instructions">⚠️ 把鼠标慢慢靠近睡觉的猫！</div>
</body>
</html>