分享一个500页面给大家

这篇具有很好参考价值的文章主要介绍了分享一个500页面给大家。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看效果:
分享一个500页面给大家
再看代码:文章来源地址https://www.toymoban.com/news/detail-462721.html

<!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>

到了这里,关于分享一个500页面给大家的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python Turtle合集】有趣好玩的代码当然要分享给大家啦~(皮卡丘、玫瑰花、小黄人......)

    🚀 作者 :“程序员梨子” 🚀 **文章简介 **:本篇文章主要是写了利用Turtle库绘制四种不一样的图案的小程序! 🚀 **文章源码免费获取 : 为了感谢每一个关注我的小可爱💓每篇文章的项目源码都是无 偿分享滴💓👇👇👇👇 点这里蓝色这行字体自取,需要什么源码记得

    2023年04月13日
    浏览(55)
  • 分享一个CSS的垂帘效果

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 先上效果图: 再上代码: 代码直接粘贴到html页面就能使用,顺滑的不可言说

    2024年02月01日
    浏览(54)
  • Python开发小游戏:写一个飞机大战只需要500行代码!

    ‘’’ :param background_image_path: 背景图片的路径地址 :param size: 游戏窗口的大小 :param title: 游戏窗口的标题 :param font_name: 指定字体 :param font_size: 指定字体大小 :param speed: 背景图滚动整个窗口一次所用时间,单位为ms ‘’’ self.size = size self.screen = pygame.display.set_mode(size) self.tit

    2024年04月11日
    浏览(49)
  • 【C语言开源库】 一个只有500行代码的开源http服务器:Tinyhttpd学习

    项目搬运,带中文翻译: https://github.com/nengm/Tinyhttpd 在嵌入式中,我们HTTP服务器用得最多的就是boa还有就是goahead,但是这2个代码量比较大,而Tinyhttpd只有几百行,比较有助于我们学习。 直接make之后,所以假如html有执行权限先把它去除了,chmod 600 index.html color.cgi、date.cgi必须

    2024年02月11日
    浏览(42)
  • C语言实现万年历(附代码) 小白完成的第一个C语言程序,希望大家多多关注,点赞

    C语言实现万年历 前言:本文章向大家介绍如何使用C语言代码实现万年历使用实例,讲解编写万年历的方法,教你轻松学会写出万年历。这个小程序算是我自己写的第一个比较完整的小程序,算是对大一上学期学习的C语言程序设计基础的一个总结 知识强调 1.由于教皇格里戈

    2024年02月11日
    浏览(37)
  • 如何使用CSS实现一个平滑滚动到页面顶部的效果(回到顶部按钮)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(49)
  • HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效——错误代码:0x8007000d

    报错图片: 最近在课上学习IIS发布.NET Core项目出现HTTP错误500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效——错误代码:0x8007000d 就是下面这样子的情况: 原因分析: 这边好像是缺少【ASPNETCoreModuleV2】文件,需要在微软官网下载运行组件,并安装

    2024年02月02日
    浏览(45)
  • 微信小程序分享页面代码

    在微信小程序中实现分享功能需要以下几个步骤: 1. 在`app.json`文件中配置分享参数,例如标题、路径等。示例如下: ```json {   \\\"pages\\\": [     \\\"pages/index/index\\\"   ],   \\\"window\\\": {     \\\"navigationBarTitleText\\\": \\\"小程序标题\\\"   },   \\\"tabBar\\\": {},   \\\"usingComponents\\\": {},   \\\"enableShareAppMessage\\\": true,

    2024年02月12日
    浏览(35)
  • 一个成都七中的初中生,出于兴趣爱好实现的 Win12 UI 页面效果,佩服佩服

    微软 Bing 搜索引擎,搜索 初中生 win12,能找到一个 github 仓库,地址如下:https://github.com/tjy-gitnub/win12 这个代码仓库一度冲上了 GitHub 的 Trending 热榜,目前已经获得了 6100 多个 stars. 这个开源项目,作者没有使用任何诸如 Angular,React 和 Vue 等前端开发框架,而是纯 HT

    2024年04月17日
    浏览(53)
  • 前端 | VScode实现一边写代码一边可以实时查看页面效果[图文详解]

    本文主要是基于VSCode实现实现一边写前端代码一边可以实时查看页面效果。 自从VScode更新后,不用自己另外设置浏览器的打开方式,只需要俩个插件就可以简单搞定: - Live Server - Live Preview  当然也可以下载别的浏览器 点击代码,右键选择 Show Preview ,就会实现左边代码,右边

    2024年02月08日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包