404 页面代码
<template>
<div class="container"><h1>404</h1>
<div ><p class="text-center">当前页面无法访问,可能没有权限或已删除</p><p class="text-center"> 去别处看看吧</p>
</div>
</div>
</template>
<script setup lang='ts'></script>
<style lang="scss" scoped>
h1 {font-size: 6rem;animation: shake .6s ease-in-out infinite alternate;display: flex;height: 50vh;justify-content: center;align-items: end;
}
.text-center{display: flex;justify-content: center;font-size: 22px;
}@keyframes shake {0% {transform: translate(-10px)}25% {transform: translate(-20px, 1px)}50% {transform: translate(-30px, -1px)}75% {transform: translate(-20px, -2px) skewY(-8deg) scaleX(.96);filter: blur(0)}100% {transform: translate(-10px, -1px)}
}
h1:before {content: attr(data-t);position: absolute;left: 50%;transform: translate(-50%,.34em);height: .1em;line-height: .5em;width: 100%;animation: scan .5s ease-in-out 275ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;overflow: hidden;opacity: .7;
}@keyframes glitch-anim {0% {clip: rect(32px,9999px,28px,0)}10% {clip: rect(13px,9999px,37px,0)}20% {clip: rect(45px,9999px,33px,0)}30% {clip: rect(31px,9999px,94px,0)}40% {clip: rect(88px,9999px,98px,0)}50% {clip: rect(9px,9999px,98px,0)}60% {clip: rect(37px,9999px,17px,0)}70% {clip: rect(77px,9999px,34px,0)}80% {clip: rect(55px,9999px,49px,0)}90% {clip: rect(10px,9999px,2px,0)}to {clip: rect(35px,9999px,53px,0)}
}@keyframes scan {0%,20%,to {height: 0;transform: translate(-50%,.44em)}10%,15% {height: 1em;line-height: .2em;transform: translate(-55%,.09em)}
}
h1:after {content: attr(data-t);position: absolute;top: -8px;left: 50%;transform: translate(-50%,.34em);height: .5em;line-height: .1em;width: 100%;animation: scan 665ms ease-in-out .59s infinite alternate,glitch-anim .3s ease-in-out infinite alternate;overflow: hidden;opacity: .8
}
</style>