夜雨聆风
一个贼眉鼠眼的404错误页【源码】
我能为你提供什么服务？
网站建设 | 小程序开发 | 软件定制
我是鹏魔王，一个做网站、小程序的程序员，记录生活日常、及技术分享。
本欲起身离红尘，奈何影子落人间，欢迎关注，祝大家早日实现财务自由！
已关注
关注
重播 分享 赞
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>404 Error Face 鹏魔王</title><metaname="viewport"content="width=device-width, initial-scale=1, viewport-fit=cover"><linkrel="stylesheet"href="./style.css"></head><body><main><svgclass="face"viewBox="0 0 320 380"width="320px"height="380px"aria-label="A 404 becomes a face, looks to the sides, and blinks. The 4s slide up, the 0 slides down, and then a mouth appears."><gfill="none"stroke="currentcolor"stroke-linecap="round"stroke-linejoin="round"stroke-width="25"><gclass="face__eyes"transform="translate(0, 112.5)"><gtransform="translate(15, 0)"><polylineclass="face__eye-lid"points="37,0 0,120 75,120" /><polylineclass="face__pupil"points="55,120 55,155"stroke-dasharray="35 35" /></g><gtransform="translate(230, 0)"><polylineclass="face__eye-lid"points="37,0 0,120 75,120" /><polylineclass="face__pupil"points="55,120 55,155"stroke-dasharray="35 35" /></g></g><rectclass="face__nose"rx="4"ry="4"x="132.5"y="112.5"width="55"height="155" /><gstroke-dasharray="102 102"transform="translate(65, 334)"><pathclass="face__mouth-left"d="M 0 30 C 0 30 40 0 95 0"stroke-dashoffset="-102" /><pathclass="face__mouth-right"d="M 95 0 C 150 0 190 30 190 30"stroke-dashoffset="102" /></g></g></svg></main></body></html>
* {border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--sat: 10%;--light: hsl(var(--hue), var(--sat), 95%);--dark: hsl(var(--hue), var(--sat), 5%);--trans-dur: 0.3s;color-scheme: light dark;font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}body {background-color: light-dark(var(--light), var(--dark));color: light-dark(var(--dark), var(--light));font: 1em/1.5 sans-serif;display: grid;place-items: center;height: 100vh;transition: background-color var(--trans-dur), color var(--trans-dur);}main {padding: 1.5em 0;}.face {display: block;width: 12em;height: auto;}.face__eyes, .face__eye-lid, .face__mouth-left, .face__mouth-right, .face__nose, .face__pupil {animation: eyes 1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;}.face__eye-lid, .face__pupil {animation-duration: 4s;animation-delay: 1.3s;animation-iteration-count: infinite;}.face__eye-lid {animation-name: eye-lid;}.face__mouth-left, .face__mouth-right {animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);}.face__mouth-left {animation-name: mouth-left;}.face__mouth-right {animation-name: mouth-right;}.face__nose {animation-name: nose;}.face__pupil {animation-name: pupil;}/* Animations */@keyframes eye-lid {from, 40%, 45%, to {transform: translateY(0);}42.5% {transform: translateY(17.5px);}}@keyframes eyes {from {transform: translateY(112.5px);}to {transform: translateY(15px);}}@keyframes pupil {from, 37.5%, 40%, 45%, 87.5%, to {stroke-dashoffset: 0;transform: translate(0, 0);}12.5%, 25%, 62.5%, 75% {stroke-dashoffset: 0;transform: translate(-35px, 0);}42.5% {stroke-dashoffset: 35;transform: translate(0, 17.5px);}}@keyframes mouth-left {from, 50% {stroke-dashoffset: -102;}to {stroke-dashoffset: 0;}}@keyframes mouth-right {from, 50% {stroke-dashoffset: 102;}to {stroke-dashoffset: 0;}}@keyframes nose {from {transform: translate(0, 0);}to {transform: translate(0, 22.5px);}}