当前位置:   article > 正文

404 页面代码

404 页面代码

 

  1. <template>
  2. <div class="container">
  3. <h1>404</h1>
  4. <div >
  5. <p class="text-center">当前页面无法访问,可能没有权限或已删除</p>
  6. <p class="text-center"> 去别处看看吧</p>
  7. </div>
  8. </div>
  9. </template>
  10. <script setup lang='ts'>
  11. </script>
  12. <style lang="scss" scoped>
  13. h1 {
  14. font-size: 6rem;
  15. animation: shake .6s ease-in-out infinite alternate;
  16. display: flex;
  17. height: 50vh;
  18. justify-content: center;
  19. align-items: end;
  20. }
  21. .text-center{
  22. display: flex;
  23. justify-content: center;
  24. font-size: 22px;
  25. }
  26. @keyframes shake {
  27. 0% {
  28. transform: translate(-10px)
  29. }
  30. 25% {
  31. transform: translate(-20px, 1px)
  32. }
  33. 50% {
  34. transform: translate(-30px, -1px)
  35. }
  36. 75% {
  37. transform: translate(-20px, -2px)
  38. skewY(-8deg) scaleX(.96);
  39. filter: blur(0)
  40. }
  41. 100% {
  42. transform: translate(-10px, -1px)
  43. }
  44. }
  45. h1:before {
  46. content: attr(data-t);
  47. position: absolute;
  48. left: 50%;
  49. transform: translate(-50%,.34em);
  50. height: .1em;
  51. line-height: .5em;
  52. width: 100%;
  53. animation: scan .5s ease-in-out 275ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
  54. overflow: hidden;
  55. opacity: .7;
  56. }
  57. @keyframes glitch-anim {
  58. 0% {
  59. clip: rect(32px,9999px,28px,0)
  60. }
  61. 10% {
  62. clip: rect(13px,9999px,37px,0)
  63. }
  64. 20% {
  65. clip: rect(45px,9999px,33px,0)
  66. }
  67. 30% {
  68. clip: rect(31px,9999px,94px,0)
  69. }
  70. 40% {
  71. clip: rect(88px,9999px,98px,0)
  72. }
  73. 50% {
  74. clip: rect(9px,9999px,98px,0)
  75. }
  76. 60% {
  77. clip: rect(37px,9999px,17px,0)
  78. }
  79. 70% {
  80. clip: rect(77px,9999px,34px,0)
  81. }
  82. 80% {
  83. clip: rect(55px,9999px,49px,0)
  84. }
  85. 90% {
  86. clip: rect(10px,9999px,2px,0)
  87. }
  88. to {
  89. clip: rect(35px,9999px,53px,0)
  90. }
  91. }
  92. @keyframes scan {
  93. 0%,20%,to {
  94. height: 0;
  95. transform: translate(-50%,.44em)
  96. }
  97. 10%,15% {
  98. height: 1em;
  99. line-height: .2em;
  100. transform: translate(-55%,.09em)
  101. }
  102. }
  103. h1:after {
  104. content: attr(data-t);
  105. position: absolute;
  106. top: -8px;
  107. left: 50%;
  108. transform: translate(-50%,.34em);
  109. height: .5em;
  110. line-height: .1em;
  111. width: 100%;
  112. animation: scan 665ms ease-in-out .59s infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
  113. overflow: hidden;
  114. opacity: .8
  115. }
  116. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/728441
推荐阅读
相关标签
  

闽ICP备14008679号