为网页LOGO视频增加电影质感表现
推荐超级课程：
@TOC
前几天，一个朋友开了一家烤肉店，给我发来了烤肉店的宣传视频，我看了下，回复说：“你这视频没有什么特别吸引的人地方啊，和大街上其他的烤肉店视频没啥区别。” 朋友听了也没生气，反而说他也觉得是这种感觉，所以才发给我，寻思让我找找有没有认识的朋友给编辑编辑。 我说：“我先给你编辑下用着，等下顿烤肉我再给你问问。” 于是，也就有了我的这篇博客。
这里呢，我就不展示原素材了，从网上找了近似的视频来做说明。
因为我是程序员，当然考虑用最简单的方式给他进行效果编辑，所以没有考虑使用视频编辑类的软件，而是简单的使用sytle样式来美化，也方便之后他放到网站上，或者再进行编辑的时候省事儿。
它的原始视频是很清晰的一位高帽大厨在那里烤着兹拉的肉片的视频。视频右边竖式小楷标注着“xxx烤肉不一样的滋味”之类的宣传语。
我首先把大厨和宣传语都去掉了，只集中放大了烤肉的镜头那一段，并让它能够很自然的循环播放。
暗表：烤肉嘛，有没有大厨不重要。烤肉嘛，味道有啥不一样的~~
但是，光是突出主题还不行，这样没有视觉冲击力的话，很难立马吸引住顾客的眼球。于是呢，凭着我无数的阅片经验，我决定给它增加一种日式老电影那种“duang、duang”式的效果。（这里自己脑补，我给朋友解释的时候也是给他播放了原片，哈哈哈）
最终的效果类似这样：
下面，就是正文了，附上简单的html style实现那层电影质感的隔层：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<style>
body {
margin: 0;
background-color: #000;
}
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
}
div {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.overlay {
background-image: url('data:image/gif;base64,R0lGODdhAgACAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAACAAIAAAIDhAQFADs=');
background-size: 4px 4px;
image-rendering: pixelated;
}
.logo {
background-image: url('logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div>
<video src="kaorou.mp4" playsinline autoplay muted loop disablePictureInPicture></video>
</div>
<div class="overlay"></div>
<div class="logo"></div>
</body>
</html>