【常用】音画作品加动态视频的方法（点击小标题可看实例）

清梦 · 发表于 2024-12-22 10:16

本帖最后由花简静于 2024-12-22 18:14 编辑

清梦 · 发表于 2024-12-22 10:16

本帖最后由花简静于 2024-12-22 18:14 编辑

<style>

#mydiv {

margin: 30px 0 30px calc(50% - 931px);

display: grid;

place-items: center;

width: 1700px;

height: 900px;

background: lightblue url('http://qslt.net/data/attachment/forum/202412/17/095330o3fozp3powkfvncd.jpg') no-repeat center/cover;

box-shadow: 3px 3px 20px #000;

user-select: none;

overflow: hidden;

position: relative;

z-index: 1;

}

#vid {

position: absolute;

width: 120%;

height: 100%;

object-fit: cover;

pointer-events: none;

mix-blend-mode: multiply;

-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent);

z-index: 2;

opacity: .95;

}

</style>

</div>

清梦 · 发表于 2024-12-22 10:16

本帖最后由花简静于 2024-12-22 20:59 编辑

说明：
音画中间一般都有人物，有些动态不适合出现在人物身上，所以需要挖空中间处理一下
用22行代码完成
-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent);
这是个径向渐变，从内到外依次是：视频正中间透明，显示一部分视频，视频外边缘也透明。
为了视频显示更加自然，视频宽度调整为120%。

清梦 · 发表于 2024-12-22 10:16

清梦 · 发表于 2024-12-22 10:16

清梦 · 发表于 2024-12-22 10:16

清梦 · 发表于 2024-12-22 10:16

清梦 · 发表于 2024-12-22 10:17

清梦 · 发表于 2024-12-22 10:17

清梦 · 发表于 2024-12-22 10:17

[单图] 【常用】音画作品加动态视频的方法（点击小标题可看实例）