这个404页面不错~大家喜欢用吗？

哥斯拉 · 发表于 2025-7-26 19:25:17

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

这个404页面不错~大家喜欢用吗？ transform,left,rotate,top,background

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>404</title> <style>*, *:after, *:before{ box-sizing: border;} :root{ font-size: 0.75vw; --bg: #ff8a65; --anime-speed: 0.2s;} body{ height: 100vh; font-family: arial; background: var(--bg); overflow: hidden;} .cow{ width: 30rem; aspect-ratio: 2/1; border-radius: 4rem/15%; background-color: #fefefe; position: absolute; top: 40%; z-index: 10; transform-origin: 100%150%; left: 38%; transform: translateY(15rem) rotate(90deg); animation: jmb var(--anime-speed) linear, move calc(var(--anime-speed) * 10) linear;} .cow:before{ content: ""; position: absolute; left: 11%; top: 0; width: 40%; height: 60%; color: #000; background: currentcolor; border-radius: 00100%50%; box-shadow: 9rem -2rem0 -2rem, 15rem -3rem0 -3rem;} .cow:after{ content: ""; position: absolute; left: 20%; bottom: 6%; color: #000; background: currentcolor; box-shadow: 8rem -4rem0 -1rem; width: 5rem; aspect-ratio: 1/1; border-radius: 43%57%51%49%/51%55%45%49%;} .cow.head{ position: absolute; top: 0; left: 100%; z-index: 1;} .cow.head.face{ width: 11rem; aspect-ratio: 12.5/7.5; background: #fff; box-shadow: -2rem4.5rem#000 inset; border-radius: 10%100%50%45%/44%72%26%25%; transform: rotateX(180deg) rotate(-55deg) translate(-25%, -55%); position: relative; z-index: 10;} .cow.head:after, .cow.head:before{ content: ""; position: absolute; top: -3.5rem; left: -5.5rem; transform: rotate(-25deg); background: #000; width: 4rem; height: 5rem; z-index: 20; box-shadow: 0.2rem0.1rem00.2rem#fff inset; border-radius: 0%100%38%62%/41%73%27%59%;} .cow.head:before{ z-index: 2; top: -4rem; left: -5rem; transform: rotate(-5deg);} .cow.leg{ position: absolute; top: 95%; background: #fff; width: 1.5rem; height: 3rem; transform-origin: top center;} .cow.leg:after{ content: ""; position: absolute; left: 0; top: 90%; width: 100%; height: 2.5rem; background: #fff; border-bottom: 1.5rem solid #000;} .cow.leg.b{ left: 4%; animation: legMoveB var(--anime-speed) alternate infinite;} .cow.leg.b.l{ left: 13%;} .cow.leg.b.l:after{ left: 10%; top: 75%; background: #fff; transform: rotate(-5deg);} .cow.leg.b.r{ animation-delay: var(--anime-speed);} .cow.leg.b.r:after{ left: 32%; top: 90%; background: #fff; transform: rotate(-15deg);} .cow.leg.f{ right: 5%; animation: legMoveF var(--anime-speed) alternate infinite;} .cow.leg.f.l{ right: 10%; animation-delay: var(--anime-speed);} .cow.leg.f.l:after{ right: 10%; left: auto; top: 75%; background: #fff; transform: rotate(5deg);} .cow.leg.f.r:after{ right: 20%; left: auto; top: 90%; background: #fff; transform: rotate(10deg);} .cow.tail{ position: absolute; right: 98%; top: 12%; width: 2rem; height: 10rem; border-left: 0.5rem solid #fff; border-top: 0.5rem solid #fff; border-radius: 100%0%51%49%/42%100%0%58%; transform-origin: top left; animation: tail 0.75s alternate infinite;} .cow.tail:after{ content: ""; position: absolute; left: 7%; top: 100%; background: #000; width: 1.5rem; height: 1.75rem; border-radius: 70%30%100%0%/100%30%70%0%; transform: rotate(-60deg);} .well{ background: #000; width: 30rem; height: 2rem; position: absolute; top: calc(40% + 19rem); left: 60%; border-radius: 50%;} .well:before{ content: ""; position: absolute; left: 0; top: 0%; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 -1.2rem0.25rem#000 inset; z-index: 110;} .well::after{ content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 24rem; background: var(--bg); z-index: 100;} .home-btn{ position: absolute; left: -190%; top: 2rem; font-size: 2.5rem; font-weight: bold; color: #000; background: #ffd600; display: inline-block; text-decoration: none; padding: 1.5rem3rem; border-radius: 1rem; transition: background 0.3s ease-in; transform-origin: 45rem45rem; animation: btnAnim calc(var(--anime-speed) * 20) linear;} .home-btn:hover{ background: #fbc02d;} .text-box{ font-family: "Cabin Sketch", serif; font-weight: 700; color: #fff; text-align: center; position: absolute; left: 10%; top: 28%; animation: textAnim calc(var(--anime-speed) * 18) linear;} .text-boxh1{ font-size: 24rem; margin: 0; line-height: 18rem;} .text-boxp{ width: 42rem; font-size: 5rem; line-height: 1; margin: 0;} @keyframes btnAnim{ 0%, 48%{ transform: translateX(-10rem) rotate(95deg);} 55%, 100%{ transform: translateX(0rem) rotate(0deg);}} @keyframes textAnim{ 0%, 60%{ top: 0%; transform: translatey(0); opacity: 0;} 70%, 76%, 85%{ top: 28%; transform: translatey(5%); opacity: 1;} 73%, 79%{ top: 28%; transform: translatey(-15%); opacity: 1;} 100%{ top: 28%; transform: translatey(0);}} @keyframes move{ 0%{ left: 0%; transform: translateY(0) rotate(0deg);} 85%{ left: 38%; transform: translateY(0) rotate(0deg);} 90%{ left: 40%; transform: translateY(0) rotate(5deg);} 95%{ left: 38%; transform: translateY(0) rotate(90deg);} 100%{ left: 38%; transform: translateY(15rem) rotate(90deg);}} @keyframes jmb{ 0%, 100%{ transform: translatey(0);} 50%{ transform: translatey(5px);}} @keyframes legMoveB{ 0%{ transform: rotate(2deg) translatey(0%);} 100%{ transform: rotate(-5deg) translatey(-5%);}} @keyframes legMoveF{ 0%{ transform: rotate(0deg) translatey(0%);} 100%{ transform: rotate(-15deg) translatey(-5%);}} @keyframes tail{ 0%{ transform: rotate(3deg); height: 10rem;} 100%{ transform: rotate(-3deg); height: 8rem;}} </style></head><body> <div class="cow"> <div class="head"> <div class="face"></div> </div> <div class="leg b l"></div> <div class="leg b r"></div> <div class="leg f l"></div> <div class="leg f r"></div> <div class="tail"></div> </div> <div class="well"> <a class="home-btn" href="#">回到首页</a> </div> <div class="text-box"> <h1>404</h1> </div></body></html>

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！