日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網為廣大站長提供免費收錄網站服務，提交前請做好本站友鏈：【 網站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

一款很好看的滾動 404 頁面代碼分享

發布時間：2023-07-03 16:18:16 作者：網友整理

一款好看的 404 頁面代碼滾動的 404

一款很好看的滾動 404 頁面代碼分享

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>網站 404</title>

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

</head>

<body>

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

</body>

</html>

來源：34 資源網 https://www.34l.com/wzym/431.html

分享到：
標簽：頁面
用戶無頭像

網友整理

注冊時間：

網站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網站吧！
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲，玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學四六

運動步數有氧達人2018-06-03

記錄運動步數，積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定