css实现图片老电影镜头噪点线条抖动动画效果代码-html代码-BFW代码库

css实现图片老电影镜头噪点线条抖动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现图片老电影镜头噪点线条抖动动画效果代码，指定任意图片就可以让其有老电影效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
        	--trsn: all 0.5s ease 0s;
        	--black: #000;
        }
        
        *, *:before, *:after {
        	position: absolute;
        }
        
        body {
        	margin: 0;
        	padding: 0;
        	width: 100vw;
        	height: 100vh;
        	overflow: hidden;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	background: var(--black);
        	perspective: 100vmin;
        }
        
        .content {
        	width: 100vw;
        	height: 100vh;
        	position: relative;
        	overflow: hidden;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	background: url(//repo.bfw.wiki/bfwrepo/image/5e957a2236f31.png) no-repeat center center;
        	background-size: cover;
        	transition: var(--trsn);
        }
        
        .content:before {
        	content: "BG IMAGES FROM UNSPLASH.COM";
        	font-family: Arial, Helvetica, serif;
        	bottom: 0vmin;
        	font-weight: 500;
        	font-size: 1.35vmin;
        	color: #fffD;
        	border-radius: 1px;
        	padding: 20vmin 2vmin 3vmin;
        	letter-spacing: 0.5px;
        	word-spacing: 3px;
        	background: linear-gradient(0deg, black, transparent);
        	width: 100%;
        	text-align: center;
        }
        
        .content:after {
        	content: "";
        	width: 100%;
        	height: 100%;
        	box-shadow: 0 0 20vmin 0vmin var(--black) inset, 0 0 3vmin 0.5vmin var(--black) inset, 0 0 1vmin 1vmin var(--black);
        }
        
        .film, .effect {
        	width: 100%;
        	height: 100%;
        	filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
        }
        
        .film:after, .effect:after {
        	content: '';
        	width: 120%;
        	height: 100%;
        	top: 0;
        	left: 0;
        	padding-left: 100px;
        	opacity: 0.5;
        	animation: film-scratch 0.45s steps(1) infinite;
        	background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
        }
        
        .effect:after {
        	left: 30%;
        	animation: effect-scratch 2s infinite;
        }
        
        .grain {
        	width: 100%;
        	height: 100%;
        }
        
        .grain:after {
        	content: '';
        	width: 110%;
        	height: 110%;
        	top: -5%;
        	left: -5%;
        	opacity: .25;
        	background-image: 
        		repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
        		repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
        	animation: grain 0.5s steps(1) infinite;
        	filter: drop-shadow(0px 0px 1px black);
        }
        
        @keyframes grain {
        	0%, 100% { transform: translate(0, 0); }
        	10% { transform: translate(-1%, -1%); }
        	20% { transform: translate(1%, 1%); }
        	30% { transform: translate(-2%, -2%); }
        	40% { transform: translate(3%, 3%); }
        	50% { transform: translate(-3%, -3%); }
        	60% { transform: translate(4%, 4%); }
        	70% { transform: translate(-4%, -4%); }
        	80% { transform: translate(2%, 2%); }
        	90% { transform: translate(-3%, -3%); }
        }
        
        @keyframes film-scratch {
        	0%, 100% { transform: translateX(0); opacity: 0.5; }
        	10% { transform: translateX(-1%); }
        	20% { transform: translateX(1%); }
        	30% { transform: translateX(-2%); opacity: 0.75; }
        	40% { transform: translateX(3%); }
        	50% { transform: translateX(-3%); opacity: 0.5; }
        	60% { transform: translateX(8%); }
        	70% { transform: transla.........完整代码请登录后点击上方下载按钮下载查看