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

代码语言:html

所属分类:动画

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

代码标签: 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;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0