css实现立体404页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现立体404页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1400px; background: #fff; font-family: 'Helvetica'; } body #outer { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1400px; background: #fff; transform: scale(0.75); } body .wrap { position: absolute; width: 750px; height: 400px; -webkit-animation: squiggly-anim 0.3s infinite; animation: squiggly-anim 0.3s infinite; } @-webkit-keyframes squiggly-anim { 0% { filter: url("#squiggly-0"); } 25% { filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); } 75% { filter: url("#squiggly-3"); } 100% { filter: url("#squiggly-4"); } } @keyframes squiggly-anim { 0% { filter: url("#squiggly-0"); } 25% { filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); } 75% { filter: url("#squiggly-3"); } 100% { filter: url("#squiggly-4"); } } body .wrap .ghost { position: absolute; width: 50px; height: 100px; display: none; overflow: hidden; } body .wrap .ghost:nth-of-type(3) { width: 200px; height: 200px; display: block; left: 240px; -webkit-clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0); } body .wrap .ghost:nth-of-type(3) .inner { width: 50px; height: 75px; left: 100px; transform-origin: 200% 100%; box-shadow: inset 0 0 0 2px #ccc; -webkit-animation: swing 10s ease-in-out infinite alternate; animation: swing 10s ease-in-out infinite alternate; transform: rotate(-90deg) translateY(75px); } body .wrap .ghost:nth-of-type(3) .inner:before { content: ''; position: absolute; width: 4px; height: 4px; background: #ccc; border-radius: 100%; top: 10px; right: 10px; box-shadow: -15px 5px 0 0 #ccc; -webkit-animation: blink2 2s ease-in-out infinite alternate; animation: blink2 2s ease-in-out infinite alternate; } @-webkit-keyframes blink2 { to { transform: translateX(-10px) translateY(5px); box-shadow: -15px -5px 0 0 #ccc; } } @keyframes blink2 { to { transform: translateX(-10px) translateY(5px); box-shadow: -15px -5px 0 0 #ccc; } } @-webkit-keyframes swing { 68% { transform: rotate(-90deg) translateY(75px); } 70% { transform: rotate(0deg) translateY(0px); } 100% { transform: rotate(0deg) translateY(0px); } } @keyframes swing { 68% { transform: rotate(-90deg) translateY(75px); } 70% { transform: rotate(0deg) translateY(0px); } 100% { transform: rotate(0deg) translateY(0px); } } body .wrap .ghost:nth-of-type(3) .inner:after { content: ''; position: absolute; width: 200px; height: 125px; bottom: -120px; left: 0; background: radial-gradient(circle at top, rgba(0, 0, 0, 0) 50px, #cccccc 50px, #cccccc 52px, #ffffff 52px, #ffffff 98px, #cccccc 98px, #cccccc 100px, rgba(0, 0, 0, 0) 100px); } body .wrap .ghost:nth-of-type(2) { display: block; top: 80px; right: 150px; } body .wrap .ghost:nth-of-type(2) .inner { -webkit-animation: peek1 10s ease-in-out infinite alternate; animation: peek1 10s ease-in-out infinite alternate; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; transform: translateY(100%); } body .wrap .ghost:nth-of-type(2) .inner:before { content: ''; position: absolute; width: 4px; height: 4px; background: #ccc; border-radius: 100%; top: 10px; right: 10px; box-shadow: -15px 5px 0 0 #ccc; -webkit-animation: blink 4s linear infinite; animation: blink 4s linear infinite; -webkit-animation-delay: 5s; animation-delay: 5s; } body .wrap .ghost:first-of-type { top: 65px; left: 50px; transform: rotate(-35deg); display: block; } body .wrap .ghost:first-of-type .inner { -webkit-animation: peek1 10s ease-in-out infinite alternate; animation: peek1 10s ease-in-out infinite alternate; transform: translateY(100%); } body .wrap .ghost:first-of-type .inner:before { content: ''; position: absolute; width: 4px; height: 4px; background: #ccc; border-radius: 100%; top: 10px; left: 10px; box-shadow: 15px 5px 0 0 #ccc; -webkit-animation: blink 4s linear infinite; animation: blink 4s linear infinite; -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes blink { 90% { transform: scaleY(1); } 92% { transform: scaleY(0); } 94% { transform: scaleY(1); } 96% { transform: scaleY(0); } 98% { transform: scaleY(1); } } @keyframes blink { 90% { transform: scaleY(1); } 92% { transform: scaleY(0); } 94% { transform: scaleY(1); } 96% { transform: scaleY(0); } 98% { transform: scaleY(1); } } @-webkit-keyframes peek1 { 78% { transform: translateY(100%); } 80% { transform: translateY(0%); } 100% { transform: translateY(0%); } } @keyframes peek1 { 78% { transform: translateY(100%); } 80% { transform: translateY(0%); } 100% { transform: translateY(0%); } } body .wrap .ghost .inner { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 0 2px #ccc, inset 0 -10px 20px rgba(0, 0, 0, 0.05); border-radius: 100px 100px 0 0; top: 3px; transform-style: preserve-3d; background: #fff; } body h1 { z-index: -1; font-size: 500px; margin: 0px; color: #fff; transform-style: preserve-3d; transform: rotateY(-30deg) rotateX(50deg); text-shadow: 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white; transition: 0.2s ease-in-out; -webkit-animation: shadow 10s ease-in-out infinite alternate; animation: shadow 10s ease-in-out infinite alternate; margin-right: -50px; will-change: text-shadow; } body h1:nth-of-type(1) { -webkit-animation-delay: 0.33333s; animation-delay: 0.33333s; } body h1:nth-of-type(2) { -webkit-animation-delay: 0.66667s; animation-delay: 0.66667s; } body h1:nth-of-type(3) { -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes shadow { 15% { transform: rotateY(-30deg) rotateX(50deg) translateY(0px) translateX(0px); text-shadow: 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9; } 25% { transform: rotateY(-30deg) rotateX(50deg) translateY(-75px) translateX(-50px); text-shadow: 0.52992px 0.84805px 0 #ececec, 1.05984px 1.6961px 0 #ececec, 1.58976px 2.54414px 0 #ebebeb, 2.11968px 3.39219px 0 #ebebeb, 2.6496px 4.24024px 0 #ebebeb, 3.17952px 5.08829px 0 #ebebeb, 3.70943px 5.93634px 0 #eaeaea, 4.23935px 6.78438px 0 #eaeaea, 4.76927px 7.63243px 0 #eaeaea, 5.29919px 8.48048px 0 #eaeaea, 5.82911px 9.32853px 0 #e9e9e9, 6.35903px 10.17658px 0 #e9e9e9, 6.88895px 11.02463px 0 #e9e9e9, 7.41887px 11.87267px 0 #e9e9e9, 7.94879px 12.72072px 0 #e8e8e8, 8.47871px 13.56877px 0 #e8e8e8, 9.00863px 14.41682px 0 #e8e8e8, 9.53855px 15.26487px 0 #e8e8e8, 10.06847px 16.11291px 0 #e7e7e7, 10.59839px 16.96096px 0 #e7e7e7, 11.1283px 17.80901px 0 #e7e7e7, 11.65822px 18.65706px 0 #e7e7e7, 12.18814px 19.50511px 0 #e6e6e6, 12.71806px 20.35315px 0 #e6e6e6, 13.24798px 21.2012px 0 #e6e6e6, 13.7779px 22.04925px 0 #e6e6e6, 14.30782px 22.8973px 0 #e5e5e5, 14.83774px 23.74535px 0 #e5e5e5, 15.36766px 24.59339px 0 #e5e5e5, 15.89758px 25.44144px 0 #e5e5e5, 16.4275px 26.28949px 0 #e4e4e4, 16.95742px 27.13754px 0 #e4e4e4, 17.48734px 27.98559px 0 #e4e4e4, 18.01725px 28.83364px 0 #e4e4e4, 18.54717px 29.68168px 0 #e3e3e3, 19.07709px 30.52973px 0 #e3e3e3, 19.60701px 31.37778px 0 #e3e3e3, 20.13693px 32.22583px 0 #e3e3e3, 20.66685px 33.07388px 0 #e2e2e2, 21.19677px 33.92192px 0 #e2e2e2, 21.72669px 34.76997px 0 #e2e2e2, 22.25661px 35.61802px 0 #e2e2e2, 22.78653px 36.46607px 0 #e1e1e1, 23.31645px 37.31412px 0 #e1e1e1, 23.84637px 38.16216px 0 #e1e1e1, 24.37629px 39.01021px 0 #e1e1e1, 24.90621px 39.85826px 0 #e0e0e0, 25.43612px 40.70631px 0 #e0e0e0, 25.96604px 41.55436px 0 #e0e0e0, 26.49596px 42.4024px 0 #e0e0e0, 27.02588px 43.25045px 0 #dfdfdf, 27.5558px 44.0985px 0 #dfdfdf, 28.08572px 44.94655px 0 #dfdfdf, 28.61564px 45.7946px 0 #dfdfdf, 29.14556px 46.64265px 0 #dedede, 29.67548px 47.49069px 0 #dedede, 30.2054px 48.33874px 0 #dedede, 30.73532px 49.18679px 0 #dedede, 31.26524px 50.03484px 0 #dddddd, 31.79516px 50.88289px 0 #dddddd, 32.32508px 51.73093px 0 #dddddd, 32.85499px 52.57898px 0 #dddddd, 33.38491px 53.42703px 0 gainsboro, 33.91483px 54.27508px 0 gainsboro, 34.44475px 55.12313px 0 gainsboro, 34.97467px 55.97117px 0 gainsboro, 35.50459px 56.81922px 0 #dbdbdb, 36.03451px 57.66727px 0 #dbdbdb, 36.56443px 58.51532px 0 #dbdbdb, 37.09435px 59.36337px 0 #dbdbdb, 37.62427px 60.21141px 0 #dadada, 38.15419px 61.05946px 0 #dadada, 38.68411px 61.90751px 0 #dadada, 39.21403px 62.75556px 0 #dadada, 39.74394px 63.60361px 0 #d9d9d9, 40.27386px 64.45166px 0 #d9d9d9, 40.80378px 65.2997px 0 #d9d9d9, 41.3337px 66.14775px 0 #d9d9d9, 41.86362px 66.9958px 0 #d8d8d8, 42.39354px 67.84385px 0 #d8d8d8, 42.92346px 68.6919px 0 #d8d8d8, 43.45338px 69.53994px 0 #d8d8d8, 43.9833px 70.38799px 0 #d7d7d7, 44.51322px 71.23604px 0 #d7d7d7, 45.04314px 72.08409px 0 #d7d7d7, 45.57306px 72.93214px 0 #d7d7d7, 46.10298px 73.78018px 0 #d6d6d6, 46.6329px 74.62823px 0 #d6d6d6, 47.16281px 75.47628px 0 #d6d6d6, 47.69273px 76.32433px 0 #d6d6d6, 48.22265px 77.17238px 0 #d5d5d5, 48.75257px 78.02042px 0 #d5d5d5, 49.28249px 78.86847px 0 #d5d5d5, 49.81241px 79.71652px 0 #d5d5d5, 50.34233px 80.56457px 0 #d4d4d4, 50.87225px 81.41262px 0 #d4d4d4, 51.40217px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0