index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <div class="saga-container">
  3. <div class="saga-error404page">
  4. <div class="saga-newcharacter404">
  5. <div class="saga-chair404"></div>
  6. <div class="saga-leftshoe404"></div>
  7. <div class="saga-rightshoe404"></div>
  8. <div class="saga-legs404"></div>
  9. <div class="saga-torso404">
  10. <div class="saga-body404"></div>
  11. <div class="saga-leftarm404"></div>
  12. <div class="saga-rightarm404"></div>
  13. <div class="saga-head404">
  14. <div class="saga-eyes404"></div>
  15. </div>
  16. </div>
  17. <div class="saga-laptop404"></div>
  18. </div>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {}
  26. },
  27. created() {},
  28. mounted() {},
  29. methods: {}
  30. }
  31. </script>
  32. <style lang="scss">
  33. .saga-container {
  34. display: flex;
  35. flex-direction: column;
  36. align-items: center;
  37. justify-content: center;
  38. height: 100vh;
  39. }
  40. body {
  41. background-color: white;
  42. overflow: hidden;
  43. }
  44. .saga-error404page {
  45. width: 400px;
  46. height: 800px;
  47. position: absolute;
  48. top: 50%;
  49. left: 50%;
  50. transform: translate(-50%, -50%);
  51. }
  52. .saga-body404,
  53. .saga-head404,
  54. .saga-eyes404,
  55. .saga-leftarm404,
  56. .saga-rightarm404,
  57. .saga-chair404,
  58. .saga-leftshoe404,
  59. .saga-rightshoe404,
  60. .saga-legs404,
  61. .saga-laptop404 {
  62. background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/404-character-new.png) 0 0 no-repeat;
  63. width: 200px;
  64. height: 200px;
  65. }
  66. .saga-newcharacter404,
  67. .saga-torso404,
  68. .saga-body404,
  69. .saga-head404,
  70. .saga-eyes404,
  71. .saga-leftarm404,
  72. .saga-rightarm404,
  73. .saga-chair404,
  74. .saga-leftshoe404,
  75. .saga-rightshoe404,
  76. .saga-legs404,
  77. .saga-laptop404 {
  78. background-size: 750px;
  79. position: absolute;
  80. display: block;
  81. }
  82. .saga-newcharacter404 {
  83. width: 400px;
  84. height: 800px;
  85. left: 50%;
  86. top: 20px;
  87. margin-left: -200px;
  88. }
  89. $swayspeed: 20s;
  90. .saga-torso404 {
  91. position: absolute;
  92. display: block;
  93. top: 138px;
  94. left: 0px;
  95. width: 389px;
  96. height: 252px;
  97. animation: sway $swayspeed ease infinite;
  98. transform-origin: 50% 100%;
  99. }
  100. .saga-body404 {
  101. position: absolute;
  102. display: block;
  103. top: 0px;
  104. left: 0px;
  105. width: 389px;
  106. height: 253px;
  107. }
  108. .saga-head404 {
  109. position: absolute;
  110. top: -148px;
  111. left: 106px;
  112. width: 160px;
  113. height: 194px;
  114. background-position: 0px -265px;
  115. transform-origin: 50% 85%;
  116. animation: headTilt $swayspeed ease infinite;
  117. }
  118. .saga-eyes404 {
  119. position: absolute;
  120. top: 92px;
  121. left: 34px;
  122. width: 73px;
  123. height: 18px;
  124. background-position: -162px -350px;
  125. animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;
  126. }
  127. .saga-leftarm404 {
  128. position: absolute;
  129. top: 159px;
  130. left: 0;
  131. width: 165px;
  132. height: 73px;
  133. background-position: -265px -341px;
  134. transform-origin: 9% 35%;
  135. transform: rotateZ(0deg);
  136. animation: typeLeft 0.4s linear infinite;
  137. }
  138. .saga-rightarm404 {
  139. position: absolute;
  140. top: 148px;
  141. left: 231px;
  142. width: 157px;
  143. height: 91px;
  144. background-position: -442px -323px;
  145. transform-origin: 90% 25%;
  146. animation: typeLeft 0.4s linear infinite;
  147. }
  148. .saga-chair404 {
  149. position: absolute;
  150. top: 430px;
  151. left: 55px;
  152. width: 260px;
  153. height: 365px;
  154. background-position: -12px -697px;
  155. }
  156. .saga-legs404 {
  157. position: absolute;
  158. top: 378px;
  159. left: 4px;
  160. width: 370px;
  161. height: 247px;
  162. background-position: -381px -443px;
  163. }
  164. .saga-leftshoe404 {
  165. position: absolute;
  166. top: 591px;
  167. left: 54px;
  168. width: 130px;
  169. height: 92px;
  170. background-position: -315px -749px;
  171. }
  172. .saga-rightshoe404 {
  173. position: absolute;
  174. top: 594px;
  175. left: 187px;
  176. width: 135px;
  177. height: 81px;
  178. background-position: -453px -749px;
  179. transform-origin: 35% 12%;
  180. animation: tapRight 1s linear infinite;
  181. }
  182. .saga-laptop404 {
  183. position: absolute;
  184. top: 186px;
  185. left: 9px;
  186. width: 365px;
  187. height: 216px;
  188. background-position: -2px -466px;
  189. transform-origin: 50% 100%;
  190. animation: tapWobble 0.4s linear infinite;
  191. }
  192. @keyframes sway {
  193. 0% {
  194. transform: rotateZ(0deg);
  195. }
  196. 20% {
  197. transform: rotateZ(0deg);
  198. }
  199. 25% {
  200. transform: rotateZ(4deg);
  201. }
  202. 45% {
  203. transform: rotateZ(4deg);
  204. }
  205. 50% {
  206. transform: rotateZ(0deg);
  207. }
  208. 70% {
  209. transform: rotateZ(0deg);
  210. }
  211. 75% {
  212. transform: rotateZ(-4deg);
  213. }
  214. 90% {
  215. transform: rotateZ(-4deg);
  216. }
  217. 100% {
  218. transform: rotateZ(0deg);
  219. }
  220. }
  221. @keyframes headTilt {
  222. 0% {
  223. transform: rotateZ(0deg);
  224. }
  225. 20% {
  226. transform: rotateZ(0deg);
  227. }
  228. 25% {
  229. transform: rotateZ(-4deg);
  230. }
  231. 35% {
  232. transform: rotateZ(-4deg);
  233. }
  234. 38% {
  235. transform: rotateZ(2deg);
  236. }
  237. 42% {
  238. transform: rotateZ(2deg);
  239. }
  240. 45% {
  241. transform: rotateZ(-4deg);
  242. }
  243. 50% {
  244. transform: rotateZ(0deg);
  245. }
  246. 70% {
  247. transform: rotateZ(0deg);
  248. }
  249. 82% {
  250. transform: rotateZ(0deg);
  251. }
  252. 85% {
  253. transform: rotateZ(4deg);
  254. }
  255. 90% {
  256. transform: rotateZ(4deg);
  257. }
  258. 100% {
  259. transform: rotateZ(0deg);
  260. }
  261. }
  262. @keyframes typeLeft {
  263. 0% {
  264. transform: rotateZ(0deg);
  265. }
  266. 25% {
  267. transform: rotateZ(7deg);
  268. }
  269. 75% {
  270. transform: rotateZ(-6deg);
  271. }
  272. 100% {
  273. transform: rotateZ(0deg);
  274. }
  275. }
  276. @keyframes typeRight {
  277. 0% {
  278. transform: rotateZ(0deg);
  279. }
  280. 25% {
  281. transform: rotateZ(-6deg);
  282. }
  283. 75% {
  284. transform: rotateZ(7deg);
  285. }
  286. 100% {
  287. transform: rotateZ(0deg);
  288. }
  289. }
  290. @keyframes tapWobble {
  291. 0% {
  292. transform: rotateZ(-0.2deg);
  293. }
  294. 50% {
  295. transform: rotateZ(0.2deg);
  296. }
  297. 100% {
  298. transform: rotateZ(-0.2deg);
  299. }
  300. }
  301. @keyframes tapRight {
  302. 0% {
  303. transform: rotateZ(0deg);
  304. }
  305. 90% {
  306. transform: rotateZ(-6deg);
  307. }
  308. 100% {
  309. transform: rotateZ(0deg);
  310. }
  311. }
  312. @keyframes blink404 {
  313. 0% {
  314. background-position: -162px -350px;
  315. }
  316. 94% {
  317. background-position: -162px -350px;
  318. }
  319. 98% {
  320. background-position: -162px -368px;
  321. }
  322. 100% {
  323. background-position: -162px -350px;
  324. }
  325. }
  326. @keyframes pan {
  327. 0% {
  328. transform: translateX(-2px);
  329. }
  330. 49% {
  331. transform: translateX(-2px);
  332. }
  333. 50% {
  334. transform: translateX(2px);
  335. }
  336. 99% {
  337. transform: translateX(2px);
  338. }
  339. 100% {
  340. transform: translateX(-2px);
  341. }
  342. }
  343. </style>