source: https://codepen.io/moklick/pen/zKleC

雜訊視窗特效.html

<style>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {    
  background: #0A0D26;
  background-image: -ms-radial-gradient(center top, circle closest-corner, #556D9E 0%, #0A0D26 100%);
  background-image: -moz-radial-gradient(center top, circle closest-corner, #556D9E 0%, #0A0D26 100%);
	background-image: -o-radial-gradient(center top, circle closest-corner, #556D9E 0%, #0A0D26 100%);
	background-image: -webkit-gradient(radial, center top, 0, center top, 519, color-stop(0, #556D9E), color-stop(1, #0A0D26));
	background-image: -webkit-radial-gradient(center top, circle closest-corner, #556D9E 0%, #0A0D26 100%);
}
.screenOff {
    background: #0A0D26;
	background-image: -ms-radial-gradient(center top, circle closest-corner, #315396 0%, #0A0D26 100%);
	background-image: -moz-radial-gradient(center top, circle closest-corner, #315396 0%, #0A0D26 100%);
	background-image: -o-radial-gradient(center top, circle closest-corner, #315396 0%, #0A0D26 100%);
	background-image: -webkit-gradient(radial, center top, 0, center top, 519, color-stop(0, #315396), color-stop(1, #0A0D26));
	background-image: -webkit-radial-gradient(center top, circle closest-corner, #315396 0%, #0A0D26 100%);
}
.screen {
	position: relative;
	border-radius: 5px;
	margin: 20px auto 0 auto;
	width: 30%;
	padding: 1.5% 1.5% 3%;
	background: #111;
}

.screen:after {
	content: "";
	position: absolute;
	left: 6%;
	background: -moz-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
	background: -webkit-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
	background: linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
	border-radius: 10px;
	width: 88%;
	height: 50%;
	top: 8%;
}

.button {
  background: red;
	border-radius: 55% 55% 55% 55%;
	bottom: 3%;
	cursor: pointer;
	height: 5%;
	opacity: 0.85;
	position: absolute;
	right: 4%;
	width: 5%;
	box-shadow: inset 0 -2px 5px rgba(0,0,0,.75);
	transition: background .5s;
}
.screenOff .button{
	background: lightgrey;
}
.button:hover {
	opacity: 1;
}
canvas {
	border-radius: 5px;
	width: 100%;
	display: block;
	transition: box-shadow .25s;
  box-shadow: 0 10px 20px rgba(255,255,255,.25);
}
.screenOff canvas{
	box-shadow: 0 5px 10px rgba(255,255,255,.15);
}
.footer {
	position: absolute;
	height: 6%;
	width: 91%;
	background: black;
	bottom: -6%;
	box-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.message {
  display:none;
	background: white;
	border-radius: 5px;
	font-size: 20px;
	height: 25px;
	left: 50%;
	margin-left: -60px;
	padding: 10px;
	position: absolute;
	text-align: center;
	top: 40%;
	width: 100px;
	opacity: 0;
	transition: opacity .5s;
	-moz-transition: opacity .5s;
	-webkit-transition: opacity .5s;
}
.message:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: white transparent transparent transparent;
	top: 45px;
	left: 20%;
	margin-left: -10px;
}
</style>

<div class="screen">
<canvas id="canvas"></canvas>
    <div class="button" id="btn"></div>
    <div class="footer"></div>
    <div class="message" id="msg"></div>
</div>

<script>
var Application = ( function() {

    var canvas;
    var ctx;
  	var imgData;
		var pix;
		var WIDTH;
		var HEIGHT;
		var flickerInterval;
		var switchTimeout;
		var isOn;
		var self;
		var btnElm;

		var init = function() {
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext('2d');
			canvas.width = WIDTH = 450;
			canvas.height = HEIGHT = 300;
			isOn = true;
			ctx.fillStyle = 'white';
			ctx.fillRect(0, 0, WIDTH, HEIGHT);
			ctx.fill();
			imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
			pix = imgData.data;
			flickerInterval = setInterval(flickering, 50);
			btnElm = document.getElementById('btn');
			btnElm.addEventListener('click', toggleScreen, false);
		};

		var flickering = function() {
			for (var i = 0; i < pix.length; i += 4) {
				var color = (Math.random() * 255) + 50;
				pix[i] = color;
				pix[i + 1] = color;
				pix[i + 2] = color;
			}
			ctx.putImageData(imgData, 0, 0);
		};
  
		var toggleScreen = function() {
			var msg = document.getElementById('msg');
			msg.style.opacity = 0;
      msg.style.display = 'block';
      
			if ( typeof switchTimeout != 'undefined') {
				clearTimeout(switchTimeout);
			}
			if (isOn) {
				clearInterval(flickerInterval);
				document.body.classList.add('screenOff');
				ctx.fillStyle = '#222';
				ctx.fillRect(0, 0, WIDTH, HEIGHT);
				ctx.fill();
				msg.innerHTML = 'Thanks!';
			} else {
        document.body.classList.remove('screenOff');
				flickerInterval = setInterval(flickering, 50);
				msg.innerHTML = 'Really??';
			}
			msg.style.opacity = 1;
			switchTimeout = window.setTimeout(function() {
				msg.style.opacity = 0;
			}, 2750);
			isOn = !isOn;
		};

		return {
			init : init
		};
	}());

Application.init(); 
</script>