您好,欢迎您!

错误页面的默认代码

帖子:9
评论:3
经验:128
等级:Lv1
VIP会员

04-24

  • 浏览 347
  • 评论 1
  • 收藏
<style type="text/css">
a{text-decoration:none;color:#515151}
li,ul{list-style:none}
body{font-family:"微软雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";font-size:14px;color:#515151}
.tips_cont{height:440px;padding-top:150px;width:1080px;margin:0 auto;overflow:hidden}
.tips_cont h2{font-size:30px;color:#3a3a3a;padding-bottom:10px}
.tips_cont h5{font-size:18px;color:#3a3a3a;padding-bottom:58px}
.img_tips{float:left;margin:0 88px 0 155px}
.message_tips{float:left;margin-top:75px}
.btn_tips{display:block;width:265px;height:55px;background-color:#31a5e7;font-size:24px;color:#fff;text-align:center;line-height:55px}
@media screen and (max-width:800px){.tips_cont{width:100%}
.img_tips{display:none}
.btn_tips{width:100%}
.message_tips{margin-top:0;width:100%}
.tips_cont{padding-top:120px}
}
</style>
<div class="tips_cont">
    <div class="img_tips">
        <img src="/public/img/404.jpg">
    </div>
    <div class="message_tips">
        <h2>哎呀!找不到页面了!</h2>
        <h5>不要伤心,可能是网址错了呢,重新核对一下吧。</h5>
        <a class="btn_tips" href="/">返回首页</a>
    </div>
</div>

image.png

OtaCms

在使用的过程中紧急情况可联系QQ50361804,非会员和授权用户请在社区发布求助

  • 评论列表
  • admin 04-24

    <style>body {
      background: #000;
      height: 100vh;
      overflow: hidden;
      display: flex;
      font-family: 'Anton' sans-serif;
      justify-content: center;
      align-items: center;
      -webkit-perspective: 1000px;
              perspective: 1000px;
    }
    
    div {
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }
    
    .rail {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-transform: rotateX(-30deg) rotateY(-30deg);
              transform: rotateX(-30deg) rotateY(-30deg);
    }
    .rail .stamp {
      position: absolute;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #141414;
      color: #fff;
      font-size: 7rem;
    }
    .rail .stamp:nth-child(1) {
      -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
              animation: stampSlide 40000ms -2300ms linear infinite;
    }
    .rail .stamp:nth-child(2) {
      -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
              animation: stampSlide 40000ms -4300ms linear infinite;
    }
    .rail .stamp:nth-child(3) {
      -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
              animation: stampSlide 40000ms -6300ms linear infinite;
    }
    .rail .stamp:nth-child(4) {
      -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
              animation: stampSlide 40000ms -8300ms linear infinite;
    }
    .rail .stamp:nth-child(5) {
      -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
              animation: stampSlide 40000ms -10300ms linear infinite;
    }
    .rail .stamp:nth-child(6) {
      -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
              animation: stampSlide 40000ms -12300ms linear infinite;
    }
    .rail .stamp:nth-child(7) {
      -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
              animation: stampSlide 40000ms -14300ms linear infinite;
    }
    .rail .stamp:nth-child(8) {
      -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
              animation: stampSlide 40000ms -16300ms linear infinite;
    }
    .rail .stamp:nth-child(9) {
      -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
              animation: stampSlide 40000ms -18300ms linear infinite;
    }
    .rail .stamp:nth-child(10) {
      -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
              animation: stampSlide 40000ms -20300ms linear infinite;
    }
    .rail .stamp:nth-child(11) {
      -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
              animation: stampSlide 40000ms -22300ms linear infinite;
    }
    .rail .stamp:nth-child(12) {
      -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
              animation: stampSlide 40000ms -24300ms linear infinite;
    }
    .rail .stamp:nth-child(13) {
      -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
              animation: stampSlide 40000ms -26300ms linear infinite;
    }
    .rail .stamp:nth-child(14) {
      -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
              animation: stampSlide 40000ms -28300ms linear infinite;
    }
    .rail .stamp:nth-child(15) {
      -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
              animation: stampSlide 40000ms -30300ms linear infinite;
    }
    .rail .stamp:nth-child(16) {
      -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
              animation: stampSlide 40000ms -32300ms linear infinite;
    }
    .rail .stamp:nth-child(17) {
      -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
              animation: stampSlide 40000ms -34300ms linear infinite;
    }
    .rail .stamp:nth-child(18) {
      -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
              animation: stampSlide 40000ms -36300ms linear infinite;
    }
    .rail .stamp:nth-child(19) {
      -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
              animation: stampSlide 40000ms -38300ms linear infinite;
    }
    .rail .stamp:nth-child(20) {
      -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
              animation: stampSlide 40000ms -40300ms linear infinite;
    }
    
    @-webkit-keyframes stampSlide {
      0% {
        -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
      }
      100% {
        -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
      }
    }
    
    @keyframes stampSlide {
      0% {
        -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
      }
      100% {
        -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
      }
    }
    .world {
      -webkit-transform: rotateX(-30deg) rotateY(-30deg);
              transform: rotateX(-30deg) rotateY(-30deg);
    }
    .world .forward {
      position: absolute;
      -webkit-animation: slide 2000ms linear infinite;
              animation: slide 2000ms linear infinite;
    }
    .world .box {
      width: 200px;
      height: 200px;
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
      -webkit-animation: roll 2000ms cubic-bezier(1 0.01 1 1) infinite;
              animation: roll 2000ms cubic-bezier(1 0.01 1 1) infinite;
    }
    .world .box .wall {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(10 10 10 0.8);
      border: 1px solid #fafafa;
      box-sizing: border-box;
    }
    .world .box .wall::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 7rem;
    }
    .world .box .wall:nth-child(1) {
      -webkit-transform: translateZ(100px);
              transform: translateZ(100px);
    }
    .world .box .wall:nth-child(2) {
      -webkit-transform: rotateX(180deg) translateZ(100px);
              transform: rotateX(180deg) translateZ(100px);
    }
    .world .box .wall:nth-child(3) {
      -webkit-transform: rotateX(90deg) translateZ(100px);
              transform: rotateX(90deg) translateZ(100px);
    }
    .world .box .wall:nth-child(3)::before {
      -webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
              transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
      -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
              animation: zeroFour 4000ms -2000ms linear infinite;
    }
    .world .box .wall:nth-child(4) {
      -webkit-transform: rotateX(-90deg) translateZ(100px);
              transform: rotateX(-90deg) translateZ(100px);
    }
    .world .box .wall:nth-child(4)::before {
      -webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
              transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
      -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
              animation: zeroFour 4000ms -2000ms linear infinite;
    }
    .world .box .wall:nth-child(5) {
      -webkit-transform: rotateY(90deg) translateZ(100px);
              transform: rotateY(90deg) translateZ(100px);
    }
    .world .box .wall:nth-child(5)::before {
      -webkit-transform: rotateX(180deg) translateZ(-1px);
              transform: rotateX(180deg) translateZ(-1px);
      -webkit-animation: zeroFour 4000ms linear infinite;
              animation: zeroFour 4000ms linear infinite;
    }
    .world .box .wall:nth-child(6) {
      -webkit-transform: rotateY(-90deg) translateZ(100px);
              transform: rotateY(-90deg) translateZ(100px);
    }
    .world .box .wall:nth-child(6)::before {
      -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
              transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
      -webkit-animation: zeroFour 4000ms linear infinite;
              animation: zeroFour 4000ms linear infinite;
    }
    
    @-webkit-keyframes zeroFour {
      0% {
        content: '4';
      }
      100% {
        content: '0';
      }
    }
    
    @keyframes zeroFour {
      0% {
        content: '4';
      }
      100% {
        content: '0';
      }
    }
    @-webkit-keyframes roll {
      0% {
        -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
      }
      85% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
      87% {
        -webkit-transform: rotateZ(88deg);
                transform: rotateZ(88deg);
      }
      90% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
      100% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
    }
    @keyframes roll {
      0% {
        -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
      }
      85% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
      87% {
        -webkit-transform: rotateZ(88deg);
                transform: rotateZ(88deg);
      }
      90% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
      100% {
        -webkit-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
      }
    }
    @-webkit-keyframes slide {
      0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
      100% {
        -webkit-transform: translateX(-200px);
                transform: translateX(-200px);
      }
    }
    @keyframes slide {
      0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }
      100% {
        -webkit-transform: translateX(-200px);
                transform: translateX(-200px);
      }
    }
    </style><div class="rail">
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
      <div class="stamp four">4</div>
      <div class="stamp zero">0</div>
    </div>
    <div class="world">
      <div class="forward">
        <div class="box">
          <div class="wall"></div>
          <div class="wall"></div>
          <div class="wall"></div>
          <div class="wall"></div>
          <div class="wall"></div>
          <div class="wall"></div>
        </div>
      </div>
    </div>