黑色炫酷动态引导页404页面源码自适应模板

今天给大家分享一个非常好看的404动态页面源码，黑色动态自适应的404页面模板。

html

h1 404
.cloak__wrapper
  .cloak__container
    .cloak
.info
  h2 此页面找不到了呀
  p.
    这个页面已经找不到了，您可以联系管理员，或者点击下面的主页按钮返回首页.
  a(href="http://gujuji.cn" target="_blank" rel="noreferrer noopener") 主页

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=Roboto:wght@100;300&display=swap')

:root
  --button hsl(44, 0%, 70%)
  --button-color hsl(0, 0%, 4%)
  --shadow hsl(0, 0%, 0%)
  --bg hsl(53, 0%, 45%)
  --header hsl(53, 0%, 48%)
  --color hsl(0, 0%, 98%)
  --lit-header hsl(53, 0%, 90%)
  --speed 2s

*
  box-sizing border-box
  transform-style preserve-3d

@property --swing-x
  initial-value 0
  inherits false
  syntax '<integer>'
@property --swing-y
  initial-value 0
  inherits false
  syntax '<integer>'

body
  min-height 100vh
  display flex
  font-family 'Roboto', sans-serif
  flex-direction column
  align-items center
  justify-content center
  background var(--bg)
  color var(--color)
  perspective 1200px

a
  text-transform uppercase
  text-decoration none
  background var(--button)
  color var(--button-color)
  padding 1rem 4rem
  border-radius 4rem
  font-size 0.875rem
  letter-spacing 0.05rem

p
  font-weight 100

h1
  animation swing var(--speed) infinite alternate ease-in-out
  font-size clamp(5rem, 40vmin, 20rem)
  font-family 'Open Sans', sans-serif
  margin 0
  margin-bottom 1rem
  letter-spacing 1rem
  transform translate3d(0, 0, 0vmin)
  --x calc(50% + (var(--swing-x) * 0.5) * 1%)
  background radial-gradient(var(--lit-header), var(--header) 45%) var(--x) 100% / 200% 200%
  -webkit-background-clip text
  color transparent

  &:after
    animation swing var(--speed) infinite alternate ease-in-out
    content "404"
    position absolute
    top 0
    left 0
    color var(--shadow)
    filter blur(1.5vmin)
    transform scale(1.05) translate3d(0, 12%, -10vmin) translate(calc((var(--swing-x, 0) * 0.05) * 1%), calc((var(--swing-y) * 0.05) * 1%))

.cloak
  animation swing var(--speed) infinite alternate-reverse ease-in-out
  height 100%
  width 100%
  transform-origin 50% 30%
  transform rotate(calc(var(--swing-x) * -0.25deg))
  background radial-gradient(40% 40% at 50% 42%, transparent, black 35%)
  
  &__wrapper
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    overflow hidden

  &__container
    height 250vmax
    width 250vmax
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)

.info
  text-align center
  line-height 1.5
  max-width clamp(16rem, 90vmin, 25rem)

  & > p
    margin-bottom 3rem

@keyframes swing
  0%
    --swing-x -100
    --swing-y -100
  50%
    --swing-y 0
  100%
    --swing-y -100
    --swing-x 100