Анимированная страница 404 с помехами на HTML5 и CSS3
|
1 2 3 4 5 |
<canvas id="canvas" hidden></canvas> <div class="center"> <h1>404</h1> <p>PAGE NOT FOUND.</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<style> @import url(http://fonts.googleapis.com/css?family=Oswald:400, 700); html, body { height: 100%; width: 100%; margin: 0; padding: 0; background: #242424; font-family:'Oswald', sans-serif; background: -webkit-canvas(noise); background: -moz-element(#canvas); overflow: hidden; } html::after { content:''; background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .center { height: 400px; width: 500px; position: absolute; top: calc(50% - 200px); left: calc(50% - 250px); text-align: center; } h1, p { margin: 0; padding: 0; -webkit-animation: funnytext 4s ease-in-out infinite; animation: funnytext 4s ease-in-out infinite; } h1 { font-size: 16rem; color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(3px); filter: blur(3px); } p { font-size: 2rem; color: rgba(0, 0, 0, 0.6); } body::after, body::before { content:' '; display:block; position:absolute; left:0; right:0; top:-4px; height:4px; -webkit-animation: scanline 8s linear infinite; animation: scanline 8s linear infinite; opacity: 0.33; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -webkit-canvas(noise); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -moz-element(#canvas); } body::before { -webkit-animation-delay: 4s; animation-delay: 4s; } @-webkit-keyframes scanline { 0% { top:-5px; } 100% { top:100%; } } @keyframes scanline { 0% { top:-5px; } 100% { top:100%; } } @-webkit-keyframes funnytext { 0% { color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(3px); } 30% { color: rgba(0, 0, 0, 0.5); -webkit-filter: blur(1px); } 65% { color: rgba(0, 0, 0, 0.2); -webkit-filter: blur(5px); } 100% { color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(3px); } } @keyframes funnytext { 0% { color: rgba(0, 0, 0, 0.3); filter: blur(3px); } 30% { color: rgba(0, 0, 0, 0.5); filter: blur(1px); } 65% { color: rgba(0, 0, 0, 0.2); filter: blur(5px); } 100% { color: rgba(0, 0, 0, 0.3); filter: blur(3px); } } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), height = canvas.height = 256, width = canvas.width = height, bcontext = 'getCSSCanvasContext' in document ? document.getCSSCanvasContext('2d', 'noise', width, height) : context; noise(); function noise() { requestAnimationFrame(noise); var idata = context.getImageData(0, 0, width, height); for (var i = 0; i < idata.data.length; i += 4) { idata.data[i] = idata.data[i + 1] = idata.data[i + 2] = Math.floor(Math.random() * 255); idata.data[i + 3] = 255; } bcontext.putImageData(idata, 0, 0); }; </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Спасибо милаш, себе поставил :з
Пожалуйста 🙂
Странно, что не работает эффект помех в хроме... 🙁