Welcome 您好!

    

纯css:创意404页面动画

效果

下面直接上代码~


html

<div class="container container-star">
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-1"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
<div class="star-2"></div>
</div>
<div class="container container-bird">
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="bird bird-anim">
<div class="bird-container">
  <div class="wing wing-left">
    <div class="wing-left-top"></div>
  </div>
  <div class="wing wing-right">
    <div class="wing-right-top"></div>
  </div>
</div>
</div>
<div class="container-title">
<div class="title">
  <div class="number">4</div>
  <div class="moon">
    <div class="face">
      <div class="mouth"></div>
      <div class="eyes">
        <div class="eye-left"></div>
        <div class="eye-right"></div>
      </div>
    </div>
  </div>
  <div class="number">4</div>
</div>
<div class="subtitle">哎呀,网页无法显示</div>
<button>返回首页</button>
</div>
</div>

css

css.css


介绍

新建一个404.html,把html代码发到404.html里,然后引入css.css即可

亿七Seven

添加新评论

有种脾气叫,不放弃。

梦想是注定孤独的旅行,路上少不了质疑和嘲笑,但那又怎样,哪怕遍体鳞伤也要活的漂亮。

不管现在有多么艰辛,我们也要做个生活的舞者。

命运从来不会同情弱者。

不怕万人阻挡在前方,只怕自己先行投降。