创意的方块翻滚404页面特效
文章在线投稿 广告合作和本站APP 官方交流群 手机扫一扫
模板源代码插件模板程序网站源代码软件破解版壹家资源社区
点击登录本站 点击注册本站 资源在线投稿
壹家资源博客>教程分享>创意的方块翻滚404页面特效

创意的方块翻滚404页面特效

教程分享955341922018-05-28 0:00:559210A+A-

20180526213187658765.jpg

<!doctype html>

<html>

<head>

<meta charset="utf-8">

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


取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

点击这里复制本文地址 以上内容由壹家资源网整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！

相关文章

发表评论

支持Ctrl+Enter提交

壹家资源博客 © All Rights Reserved.  
Copyright Copyright 2015-2022 壹家资源网
蜀ICP备2022002889号
Powered by 基于zblog搭建 Themes by gouba8.cn
网站地图| 发展历程| 留言建议| 网站管理

×
×

强烈推荐×