分享一款非常炫酷的滚动立方体404单页源码

源码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>404</title>
  6. <style>
  7. body {
  8. background: #000;
  9. height: 100vh;
  10. overflow: hidden;
  11. display: flex;
  12. font-family: 'Anton', sans-serif;
  13. justify-content: center;
  14. align-items: center;
  15. -webkit-perspective: 1000px;
  16. perspective: 1000px;
  17. }
  18. div {
  19. -webkit-transform-style: preserve-3d;
  20. transform-style: preserve-3d;
  21. }
  22. .rail {
  23. position: absolute;
  24. width: 100%;
  25. height: 100%;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. -webkit-transform: rotateX(-30deg) rotateY(-30deg);
  30. transform: rotateX(-30deg) rotateY(-30deg);
  31. }
  32. .rail .stamp {
  33. position: absolute;
  34. width: 200px;
  35. height: 200px;
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. background: #141414;
  40. color: #fff;
  41. font-size: 7rem;
  42. }
  43. .rail .stamp:nth-child(1) {
  44. -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
  45. animation: stampSlide 40000ms -2300ms linear infinite;
  46. }
  47. .rail .stamp:nth-child(2) {
  48. -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
  49. animation: stampSlide 40000ms -4300ms linear infinite;
  50. }
  51. .rail .stamp:nth-child(3) {
  52. -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
  53. animation: stampSlide 40000ms -6300ms linear infinite;
  54. }
  55. .rail .stamp:nth-child(4) {
  56. -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
  57. animation: stampSlide 40000ms -8300ms linear infinite;
  58. }
  59. .rail .stamp:nth-child(5) {
  60. -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
  61. animation: stampSlide 40000ms -10300ms linear infinite;
  62. }
  63. .rail .stamp:nth-child(6) {
  64. -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
  65. animation: stampSlide 40000ms -12300ms linear infinite;
  66. }
  67. .rail .stamp:nth-child(7) {
  68. -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
  69. animation: stampSlide 40000ms -14300ms linear infinite;
  70. }
  71. .rail .stamp:nth-child(8) {
  72. -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
  73. animation: stampSlide 40000ms -16300ms linear infinite;
  74. }
  75. .rail .stamp:nth-child(9) {
  76. -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
  77. animation: stampSlide 40000ms -18300ms linear infinite;
  78. }
  79. .rail .stamp:nth-child(10) {
  80. -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
  81. animation: stampSlide 40000ms -20300ms linear infinite;
  82. }
  83. .rail .stamp:nth-child(11) {
  84. -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
  85. animation: stampSlide 40000ms -22300ms linear infinite;
  86. }
  87. .rail .stamp:nth-child(12) {
  88. -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
  89. animation: stampSlide 40000ms -24300ms linear infinite;
  90. }
  91. .rail .stamp:nth-child(13) {
  92. -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
  93. animation: stampSlide 40000ms -26300ms linear infinite;
  94. }
  95. .rail .stamp:nth-child(14) {
  96. -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
  97. animation: stampSlide 40000ms -28300ms linear infinite;
  98. }
  99. .rail .stamp:nth-child(15) {
  100. -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
  101. animation: stampSlide 40000ms -30300ms linear infinite;
  102. }
  103. .rail .stamp:nth-child(16) {
  104. -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
  105. animation: stampSlide 40000ms -32300ms linear infinite;
  106. }
  107. .rail .stamp:nth-child(17) {
  108. -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
  109. animation: stampSlide 40000ms -34300ms linear infinite;
  110. }
  111. .rail .stamp:nth-child(18) {
  112. -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
  113. animation: stampSlide 40000ms -36300ms linear infinite;
  114. }
  115. .rail .stamp:nth-child(19) {
  116. -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
  117. animation: stampSlide 40000ms -38300ms linear infinite;
  118. }
  119. .rail .stamp:nth-child(20) {
  120. -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
  121. animation: stampSlide 40000ms -40300ms linear infinite;
  122. }
  123. @-webkit-keyframes stampSlide {
  124. 0% {
  125. -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  126. transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  127. }
  128. 100% {
  129. -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  130. transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  131. }
  132. }
  133. @keyframes stampSlide {
  134. 0% {
  135. -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  136. transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  137. }
  138. 100% {
  139. -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  140. transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  141. }
  142. }
  143. .world {
  144. -webkit-transform: rotateX(-30deg) rotateY(-30deg);
  145. transform: rotateX(-30deg) rotateY(-30deg);
  146. }
  147. .world .forward {
  148. position: absolute;
  149. -webkit-animation: slide 2000ms linear infinite;
  150. animation: slide 2000ms linear infinite;
  151. }
  152. .world .box {
  153. width: 200px;
  154. height: 200px;
  155. -webkit-transform-origin: 100% 100%;
  156. transform-origin: 100% 100%;
  157. -webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
  158. animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
  159. }
  160. .world .box .wall {
  161. position: absolute;
  162. width: 200px;
  163. height: 200px;
  164. background: rgba(10, 10, 10, 0.8);
  165. border: 1px solid #fafafa;
  166. box-sizing: border-box;
  167. }
  168. .world .box .wall::before {
  169. content: '';
  170. position: absolute;
  171. width: 100%;
  172. height: 100%;
  173. display: flex;
  174. justify-content: center;
  175. align-items: center;
  176. color: #fff;
  177. font-size: 7rem;
  178. }
  179. .world .box .wall:nth-child(1) {
  180. -webkit-transform: translateZ(100px);
  181. transform: translateZ(100px);
  182. }
  183. .world .box .wall:nth-child(2) {
  184. -webkit-transform: rotateX(180deg) translateZ(100px);
  185. transform: rotateX(180deg) translateZ(100px);
  186. }
  187. .world .box .wall:nth-child(3) {
  188. -webkit-transform: rotateX(90deg) translateZ(100px);
  189. transform: rotateX(90deg) translateZ(100px);
  190. }
  191. .world .box .wall:nth-child(3)::before {
  192. -webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  193. transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  194. -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
  195. animation: zeroFour 4000ms -2000ms linear infinite;
  196. }
  197. .world .box .wall:nth-child(4) {
  198. -webkit-transform: rotateX(-90deg) translateZ(100px);
  199. transform: rotateX(-90deg) translateZ(100px);
  200. }
  201. .world .box .wall:nth-child(4)::before {
  202. -webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  203. transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  204. -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
  205. animation: zeroFour 4000ms -2000ms linear infinite;
  206. }
  207. .world .box .wall:nth-child(5) {
  208. -webkit-transform: rotateY(90deg) translateZ(100px);
  209. transform: rotateY(90deg) translateZ(100px);
  210. }
  211. .world .box .wall:nth-child(5)::before {
  212. -webkit-transform: rotateX(180deg) translateZ(-1px);
  213. transform: rotateX(180deg) translateZ(-1px);
  214. -webkit-animation: zeroFour 4000ms linear infinite;
  215. animation: zeroFour 4000ms linear infinite;
  216. }
  217. .world .box .wall:nth-child(6) {
  218. -webkit-transform: rotateY(-90deg) translateZ(100px);
  219. transform: rotateY(-90deg) translateZ(100px);
  220. }
  221. .world .box .wall:nth-child(6)::before {
  222. -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  223. transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  224. -webkit-animation: zeroFour 4000ms linear infinite;
  225. animation: zeroFour 4000ms linear infinite;
  226. }
  227. @-webkit-keyframes zeroFour {
  228. 0% {
  229. content: '4';
  230. }
  231. 100% {
  232. content: '0';
  233. }
  234. }
  235. @keyframes zeroFour {
  236. 0% {
  237. content: '4';
  238. }
  239. 100% {
  240. content: '0';
  241. }
  242. }
  243. @-webkit-keyframes roll {
  244. 0% {
  245. -webkit-transform: rotateZ(0deg);
  246. transform: rotateZ(0deg);
  247. }
  248. 85% {
  249. -webkit-transform: rotateZ(90deg);
  250. transform: rotateZ(90deg);
  251. }
  252. 87% {
  253. -webkit-transform: rotateZ(88deg);
  254. transform: rotateZ(88deg);
  255. }
  256. 90% {
  257. -webkit-transform: rotateZ(90deg);
  258. transform: rotateZ(90deg);
  259. }
  260. 100% {
  261. -webkit-transform: rotateZ(90deg);
  262. transform: rotateZ(90deg);
  263. }
  264. }
  265. @keyframes roll {
  266. 0% {
  267. -webkit-transform: rotateZ(0deg);
  268. transform: rotateZ(0deg);
  269. }
  270. 85% {
  271. -webkit-transform: rotateZ(90deg);
  272. transform: rotateZ(90deg);
  273. }
  274. 87% {
  275. -webkit-transform: rotateZ(88deg);
  276. transform: rotateZ(88deg);
  277. }
  278. 90% {
  279. -webkit-transform: rotateZ(90deg);
  280. transform: rotateZ(90deg);
  281. }
  282. 100% {
  283. -webkit-transform: rotateZ(90deg);
  284. transform: rotateZ(90deg);
  285. }
  286. }
  287. @-webkit-keyframes slide {
  288. 0% {
  289. -webkit-transform: translateX(0);
  290. transform: translateX(0);
  291. }
  292. 100% {
  293. -webkit-transform: translateX(-200px);
  294. transform: translateX(-200px);
  295. }
  296. }
  297. @keyframes slide {
  298. 0% {
  299. -webkit-transform: translateX(0);
  300. transform: translateX(0);
  301. }
  302. 100% {
  303. -webkit-transform: translateX(-200px);
  304. transform: translateX(-200px);
  305. }
  306. }
  307. </style>
  308. </head>
  309. <body>
  310. <div class="rail">
  311. <div class="stamp four">4</div>
  312. <div class="stamp zero">0</div>
  313. <div class="stamp four">4</div>
  314. <div class="stamp zero">0</div>
  315. <div class="stamp four">4</div>
  316. <div class="stamp zero">0</div>
  317. <div class="stamp four">4</div>
  318. <div class="stamp zero">0</div>
  319. <div class="stamp four">4</div>
  320. <div class="stamp zero">0</div>
  321. <div class="stamp four">4</div>
  322. <div class="stamp zero">0</div>
  323. <div class="stamp four">4</div>
  324. <div class="stamp zero">0</div>
  325. <div class="stamp four">4</div>
  326. <div class="stamp zero">0</div>
  327. <div class="stamp four">4</div>
  328. <div class="stamp zero">0</div>
  329. <div class="stamp four">4</div>
  330. <div class="stamp zero">0</div>
  331. </div>
  332. <div class="world">
  333. <div class="forward">
  334. <div class="box">
  335. <div class="wall"></div>
  336. <div class="wall"></div>
  337. <div class="wall"></div>
  338. <div class="wall"></div>
  339. <div class="wall"></div>
  340. <div class="wall"></div>
  341. </div>
  342. </div>
  343. </div>
  344. </body>
  345. </html>


非常nice的一个404界面,体积小,轻量不卡顿,重点是非常酷的有木有。

路过的喜欢就拿去。

版权声明:Mgo 发表于 2018-07-26 14:24:36。
转载请注明:分享一款非常炫酷的滚动立方体404单页源码 | 站长聚集地

暂无评论

暂无评论...