html模仿电视机效果,使用HTML5 Canvas模拟电视播放效果

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Anton");

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.content {

background-attachment: fixed;

background-size: cover;

width: 100%;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

video {

position: absolute;

object-fit: cover;

width: 100%;

height: 100%;

z-index: 1;

filter: invert(1);

}

canvas {

position: fixed;

top: 0;

left: 0;

z-index: 2;

}

h1 {

font-family: 'Anton', sans-serif;

text-transform: uppercase;

font-size: 14rem;

text-align: center;

position: relative;

z-index: 999;

mix-blend-mode: difference;

color: white;

text-shadow: 0 -5px 2px rgba(255, 51, 51, 0.2), -5px -5px 2px rgba(255, 51, 51, 0.2), 0 5px 2px rgba(0, 255, 255, 0.2), 5px 5px 2px rgba(0, 255, 255, 0.2);

position: relative;

animation: 7s out-of-focus infinite;

}

@keyframes out-of-focus {

55% {

filter: blur(0);

opacity: 1;

}

59% {

left: 0;

}

60% {

filter: blur(2px);

left: -2px;

}

61% {

filter: blur(0);

left: 2px;

top: 2px;

opacity: .5;

}

62% {

filter: blur(2px);

left: 0;

top: 0;

opacity: 1;

}

70% {

filter: blur(0);

}

}