分享一个500页面给大家

于 2023-05-27 19:17:11 发布
阅读量1.9k 收藏 16
点赞数 2
分类专栏： CSS javascript 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35241329/article/details/130904781
版权
CSS 同时被 2 个专栏收录
81 篇文章 10 订阅
订阅专栏
javascript
30 篇文章 1 订阅
订阅专栏
这篇文章展示了如何使用HTML、CSS和JavaScript来创建一个富有创意的500错误页面。页面包含可动画的代码块和响应式设计，当用户点击卡片时，卡片会以抛掷效果消失，同时在卡片上动态生成随机数量的代码行。
摘要由CSDN通过智能技术生成

先看效果：
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>500页面</title>
  <style>
    body,
    html {
      padding: 0;
      margin: 0;
      font-family: 'Quicksand', sans-serif;
      font-weight: 400;
      overflow: hidden;
    }

    .writing {
      width: 320px;
      height: 200px;
      background-color: #3f3f3f;
      border: 1px solid #bbbbbb;
      border-radius: 6px 6px 4px 4px;
      position: relative;
    }

    .writing .topbar{
      position: absolute;
      width: 100%;
      height: 12px;
      background-color: #f1f1f1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .writing .topbar div{
      height: 6px;
      width: 6px;
      border-radius: 50%;
      margin: 3px;
      float: left;
    }

    .writing .topbar div.green{
      background-color: #60d060;
    }
    .writing .topbar div.red{
      background-color: red;
    }
    .writing .topbar div.yellow{
      background-color: #e6c015;
    }

    .writing .code {
      padding: 15px;
    }

    .writing .code ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .writing .code ul li {
      background-color: #9e9e9e;
      width: 0;
      height: 7px;
      border-radius: 6px;
      margin: 10px 0;
    }

    .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      height: 100vh;
      width: 100%;
      -webkit-transition: -webkit-transform .5s;
      transition: -webkit-transform .5s;
      transition: transform .5s;
      transition: transform .5s, -webkit-transform .5s;
    }

    .stack-container {
      position: relative;
      width: 420px;
      height: 210px;
      -webkit-transition: width 1s, height 1s;
      transition: width 1s, height 1s;
    }

    .pokeup {
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
    }

    .pokeup:hover {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      -webkit-transition: .3s ease;
      transition: .3s ease;
    }


    .error {
      width: 400px;
      padding: 40px;
      text-align: center;
    }

    .error h1 {
      font-size: 125px;
      padding: 0;
      margin: 0;
      font-weight: 700;
    }

    .error h2 {
      margin: -30px 0 0 0;
      padding: 0px;
      font-size: 47px;
      letter-spacing: 12px;
    }

    .perspec {
      -webkit-perspective: 1000px;
      perspective: 1000px;
    }

    .writeLine{
      -webkit-animation: writeLine .4s linear forwards;
      animation: writeLine .4s linear forwards;
    }

    .explode{
      -webkit-animation: explode .5s ease-in-out forwards;
      animation: explode .5s ease-in-out forwards;
    }

    .card {
      -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
      animation: tiltcard .5s ease-in-out 1s forwards;
      position: absolute;
    }

    @-webkit-keyframes tiltcard {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }

      100% {
        -webkit-transform: rotateY(-30deg);
        transform: rotateY(-30deg);
      }
    }

    @keyframes tiltcard {
      0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }

      100% {
        -webkit-transform: rotateY(-30deg);
        transform: rotateY(-30deg);
      }
    }

    @-webkit-keyframes explode {
      0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
      }

      100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
        transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
      }
    }

    @keyframes explode {
      0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1);
      }

      100% {
        -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
        transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
      }
    }

    @-webkit-keyframes writeLine {
      0% {
        width:0;
      }

      100% {
        width: var(--linelength);
      }
    }

    @keyframes writeLine {
      0% {
        width:0;
      }

      100% {
        width: var(--linelength);
      }
    }

    @media screen and (max-width: 1000px) {
      .container {
        -webkit-transform: scale(.85);
        transform: scale(.85);
      }
    }

    @media screen and (max-width: 850px) {
      .container {
        -webkit-transform: scale(.75);
        transform: scale(.75);
      }
    }

    @media screen and (max-width: 775px) {
      .container {
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
        -webkit-box-align: inherit;
        -ms-flex-align: inherit;
        align-items: inherit;
      }
    }

    @media screen and (max-width: 370px) {
      .container {
        -webkit-transform: scale(.6);
        transform: scale(.6);
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="error">
    <h1>500</h1>
    <h2>error</h2>
    <p>Ruh-roh, something just isn't right... Time to paw through your logs and get down and dirty in your
      stack-trace;)</p>
  </div>
  <div class="stack-container">
    <div class="card-container">
      <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container">
      <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container">
      <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container">
      <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container">
      <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-container">
      <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
        <div class="card">
          <div class="writing">
            <div class="topbar">
              <div class="red"></div>
              <div class="yellow"></div>
              <div class="green"></div>
            </div>
            <div class="code">
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  const stackContainer = document.querySelector('.stack-container');
  const cardNodes = document.querySelectorAll('.card-container');
  const perspecNodes = document.querySelectorAll('.perspec');
  const perspec = document.querySelector('.perspec');
  const card = document.querySelector('.card');

  let counter = stackContainer.children.length;

  //生成随机数的函数
  function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  card.addEventListener('animationend', function () {
    perspecNodes.forEach(function (elem, index) {
      elem.classList.add('explode');
    });
  });

  perspec.addEventListener('animationend', function (e) {
    if (e.animationName === 'explode') {
      cardNodes.forEach(function (elem, index) {

        //添加悬停动画类
        elem.classList.add('pokeup');

        //添加事件列表以在单击时投掷卡片
        elem.addEventListener('click', function () {
          let updown = [800, -800]
          let randomY = updown[Math.floor(Math.random() * updown.length)];
          let randomX = Math.floor(Math.random() * 1000) - 1000;
          elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
          elem.style.transition = "transform 1s ease, opacity 2s";
          elem.style.opacity = "0";
          counter--;
          if (counter === 0) {
            stackContainer.style.width = "0";
            stackContainer.style.height = "0";
          }
        });

        //生成4到10之间的随机代码行，并添加到每张卡上
        let numLines = randomIntFromInterval(5, 10);

        //循环遍历并将它们添加到DOM中
        for (let index = 0; index < numLines; index++) {
          let lineLength = randomIntFromInterval(25, 97);
          var node = document.createElement("li");
          node.classList.add('node-' + index);
          elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');


          if (index == 0) {
            elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
          } else {
            elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
              elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
            });
          }
        }
      });
    }
  });
</script>
</html>
timi先生
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
500报错页面html模板,21. Django 2.1.7 视图 - 自定义404错误、500错误
weixin_39918248的博客
06-09 767
上一篇Django 2.1.7 模型管理器 models.Manager 以及 元选项讲述了关于Django模型管理类以及如何设置表名、字段名的元选项内容。在了解了Django的模型相关知识点之后，那么再来详细看看Django的视图。 前面我也基本写了Django 2.1.7 视图，讲解了url地址的转发配置，参数获取等内容。那么本篇章再看看如何自定义404错误、500错误等错误页。参考文献ht...
Django自定义404、500等页面模板
LeslieLiangZ的博客
05-27 1226
在站点访问的过程中难免会因为不小心而访问到一些不存在的链接404或网站突然抽风导致服务器错误500，但django默认的错误页面则不怎么友好，所以我们需要自定义404、500等页面，提升用户体验 1. 首先先写好404、500等页面的html文件 2. 在站点app项目中的views.py文件中编写网页404、500等处理函数 def pageNotFound(request): ''' ...
404 500通用html模板
06-29
404,500通用html模板!
java 500错误页面模板_模板详细错误
weixin_39879674的博客
02-23 1179
§错误处理 Finding Issuejetbrick-template 提供了强大的错误定位功能，你再也不用担心找不到错误原因了。§1. 语法错误 Syntax Error错误的模板示例：#for (user: userlist)${for.index}${user.name}${user.vip ? "vip", "normal"}#end错误提示包括了：错误所在的行号和列号，错误模板路径，错...
好看的404,500页面
asfg5369的博客
07-25 2328
万能404,500页面.链接:       http://download.csdn.net/detail/asfg5369/9909396 最后下载地址:        http://download.csdn.net/detail/asfg5369/9909396
好看的404,500等错误页面
10-19
好看的错误处理页面，在Web时拦截错误页面显示
500多个html网页格式的各种源代码
12-27
500多个html网页格式的各种源代码，忘了什么时候下得了，还没认真看过！上传备份！预防丢失！
Html经典源码500例
10-23
Html经典源码500例,各种各样的小例子，应该有用到的地方
vue一个页面发出多个异步请求_浅谈vue异步数据影响页面渲染
weixin_42513038的博客
12-30 2204
浅谈vue异步数据影响页面渲染今天遇到一个问题，要保证页面渲染前请求的数据已经得到了由于user是在异步请求之后保存在session中，而在页面渲染时session中还没有user，页面直接报错。因此我希望能在所有请求都得到后再去做页面的渲染。1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏，避免渲染2.写计数器，每1ms进行一次查询，如果sess...
500多个手机H页面模板套
11-09
内含500多个H5的网页模板，包括手机端，PC段，下载出来就可以用
web工程中404/500错误页面配置+404页面模板
07-03
web工程中404/500错误页面配置+404页面模板
500套HTML模板.zip
06-28
500套html5的模板，便于学习的同时，还可以增强自己的见识
弄一个html的登录页面,如何制作一个简单的HTML登录页面（附代码）
热门推荐
weixin_42427882的博客
06-03 1万+
几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。**实例：**制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：>>>>>>>>>>>>>>>>>登 ...
服务器静态页面分享微信,JS中静态页面如何实现微信分享功能
weixin_32228501的博客
08-11 542
JS中静态页面如何实现微信分享功能发布时间：2021-07-06 11:09:02来源：亿速云阅读：65作者：小新这篇文章主要介绍了JS中静态页面如何实现微信分享功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前台代码：url=location.href;$.ajax({type:"get",url:"http://xxx...
Laravel5.1自定义500错误页面示例
12-18
分享给大家供大家参考，具体如下： Laravel 5.1中500错误是程序错误，程序错误一定是系统自带的500错误，可以通过以下步骤简单实现自定义500错误页面。 编辑PHP文件app/Exceptions/Handler.php内容如下： public ...
html图片旋转代码_两个纯html+js+css写的前端页面，分享给大家
05-25
这个示例包含了一个 `img` 标签和两个按钮，分别用于向左和向右旋转图片。通过 JS 中的 `addEventListener` 方法，监听按钮的点击事件，根据旋转方向计算图片应该旋转的角度，然后使用 CSS 的 `transform` 属性实现...
h5页面外部浏览器分享给微信好友
最新发布
11-05
要将H5页面分享给微信好友，可以通过将H5页面的链接复制到微信中，或者使用微信公众号的开放接口实现分享功能。 一种简单的方法是打开H5页面，然后复制页面的URL链接。然后打开微信，选择要分享给的好友，将链接粘贴到聊天框中发送即可。接收方点击链接后，即可打开并查看H5页面。 另一种方法是通过微信公众号的开放接口实现分享功能。首先，需要在公众号后台进行开发者注册和配置，获取开发者凭证和设置分享接口的相关信息。 然后，在H5页面中引入微信开放接口的JS文件，并在需要分享的按钮或链接中添加分享方法的调用。通过调用接口，可以进行微信授权登录，获取用户信息，以及分享到朋友圈或发送给好友的功能。 当用户点击分享按钮或链接后，会弹出微信的分享菜单，用户可以选择要分享的对象（好友或朋友圈）。选择好友后，将会打开微信聊天界面，并自动填写分享的内容和链接，用户只需要点击发送即可将H5页面分享给好友。 总之，要将H5页面分享给微信好友，可以通过复制URL链接的方式将页面共享给好友，也可以通过微信公众号的开放接口实现分享功能，让用户更加方便地分享H5页面。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

timi先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值