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

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

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

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

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

<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/095316wtotrmm0ymfmmfzm.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: 100%;

height: 130%;

top:-96px;

object-fit: cover;

pointer-events: none;

mix-blend-mode: screen;

-webkit-mask: linear-gradient(to bottom, red 58%, transparent 63.5%, transparent 0);

z-index: 2;

opacity: .95;

}

</style>

</div>

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

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

说明：
下雨又有雾的找到这一张，但是下方有一些草在摇动，所以需要隐去下半部分。
用22行代码完成
-webkit-mask: linear-gradient(to bottom, red 58%, transparent 63.5%, transparent 0);
有颜色比如red是可以看到的。
无颜色部分是transparent,百分比按情况自定

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

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

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

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

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

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

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

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