使用HTML5 Canvas模拟电视播放效果

animating canvas to look like tv noise，传统电视播放有粒子噪音。

h5, tv, noise

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3470
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@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);
    }
}

HTML

animating canvas to look like tv noise，传统电视播放有粒子噪音。

h5, tv, noise

编辑器支持Emmet

快捷键

animating canvas to look like tv noise，传统电视播放有粒子噪音。

h5, tv, noise

HTML5 Canvas使用粒子模拟液体物理特性和运动动画

使用HTML5 Canvas绘制经典漩涡粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：