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

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

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

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

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

<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/095149jlyd0pck3ce3kmyr.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: 100%;

object-fit: cover;

pointer-events: none;

mix-blend-mode:luminosity;

-webkit-mask: linear-gradient(to bottom,transparent,transparent,transparent,red);

z-index: 2;

opacity: .95;

}

</style>

</div>

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

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

说明：
这个视频只要海水一部分，上方的内容不需要。利用22行代码隐去上半部分
-webkit-mask: linear-gradient(to bottom,transparent,transparent,transparent,red);
red是显示部分，
隐去部分用transparent,（透明）需要多少按情况添加

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

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

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

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

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

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

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

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