404 页面代码

javascript 复制代码
<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>
相关推荐
文心快码BaiduComate5 分钟前
“一人即团队”——一句话驱动智能体团队
前端·后端·程序员
我是ed6 分钟前
# vue3 实现前端生成水印效果
前端
恶猫10 分钟前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
IAtlantiscsdn19 分钟前
Redis7底层数据结构解析
前端·数据结构·bootstrap
小枫编程19 分钟前
Spring Boot 与前端文件上传跨域问题:Multipart、CORS 与网关配置
前端·spring boot·后端
uhakadotcom1 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜1 小时前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍1 小时前
cdn是个啥?
前端
南雨北斗1 小时前
VSCode三个TS扩展工具介绍
前端
若无_1 小时前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git