|
作者花简静
作品加视频动态的几种方法(有些参数需要根据实际进行调整)
(一)遮挡右上角LOGO(适用于熊猫办公视频)
-webkit-mask: linear-gradient(to top right, red 88%, transparent 0);
(二)遮挡左上角LOGO(适用千库视频)
-webkit-mask: linear-gradient(to top left, red 88%, transparent 0);
(三)挖空中间LOGO边缘无虚化(适用于千库视频,两句放在一起)
webkit-mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
(四)隐藏视频上部 显示下部(三个哪个都行)
-webkit-mask: linear-gradient(to bottom,transparent 3%,red 85%,red);
-webkit-mask: linear-gradient(to top, red 30%, transparent 55%, transparent);
-webkit-mask: linear-gradient(to bottom,transparent,transparent, red);
(五)显示视频上部,隐藏下部(例如这个雨雾视频下部有草,需要去掉)
-webkit-mask: linear-gradient(to top, transparent, red);
(六)挖空中间留出人物,边缘虚化
-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent, transparent);
(七)视频变小之后,虚化边缘,使其更好与背景融合(适用于局部点缀)
-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent);
(八)两个视频叠加(一般一个背景大视频,一个小视频做点缀)
(九)视频加一个小动画(加上一个经典飞鸟)
(十)视频加飞鸟复杂版(让小鸟左右飞来飞去) |
视频反转
transform: rotateX(180deg);视频上下翻转
transform: rotateY(180deg);视频左右翻转
视频滤镜
mix-blend-mode: normal; //正常mix-blend-mode: multiply; //正片叠底mix-blend-mode: screen; //滤色mix-blend-mode: overlay; //叠加mix-blend-mode: darken; //变暗mix-blend-mode: lighten; //变亮mix-blend-mode: color-dodge; //颜色减淡mix-blend-mode: color-burn; //颜色加深mix-blend-mode: hard-light; //强光mix-blend-mode: soft-light; //柔光mix-blend-mode: difference; //差值mix-blend-mode: exclusion; //排除mix-blend-mode: hue; //色相mix-blend-mode: saturation; //饱和度mix-blend-mode: color; //颜色mix-blend-mode: luminosity; //亮度mix-blend-mode: initial; //初始mix-blend-mode: inherit; //继承mix-blend-mode: unset; //复原 |
|