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

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

本帖最后由花简静于 2025-8-15 11:37 编辑

花简静 · 发表于 2024-12-22 10:20

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

<style>

#pa {

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

width: 1700px;

height: 900px;

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

box-shadow: 2px 2px 6px rgba(0,0,0,.6);

z-index: 1;

position: relative;

overflow: hidden;

}

#mypic1 {

position: absolute;

width: 360px;

left: calc(90% - 130px);

mix-blend-mode: screen;

top: 120px;

animation: fly 30s alternate infinite forwards ;

--xx: 1%;

z-index: 10;

pointer-events: none;

}

#mypic2 {

position: absolute;

width: 360px;

left: calc(10% + 660px);

mix-blend-mode:multiply;

top: 260px;

animation: fly 25s alternate infinite forwards ;

transform: scale(-1,1);

--xx: 90%;

z-index: 10;

pointer-events: none;

}

#vid {

position: absolute;

width: 100%;

height: 110%;

top:-80px;

object-fit: cover;

pointer-events: none;

mix-blend-mode: soft-light;

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

z-index: 2;

opacity: .95;

}

@keyframes bigger { to { rx: 41; ry: 41; } }

@keyframes fly { to { left: var(--xx); } }

</style>

</div>

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

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

说明：
飞鸟动画可以原地，也可以左右飞。
这里用了两张同样的飞鸟图片，
#mypic1一张用了滤镜mix-blend-mode: screen;除黑留白，(代码16行）
#mypic2一张用了滤镜mix-blend-mode:multiply;正片叠底，（代码37行）

#mypic1（12-22）行代码—— 54行代码img id="mypic1" 这两部分是对应的
#mypic2（23-34）行代码——55行代码img id="mypic2" 这两部分是对应的

如果只需要一张飞，那把对应的一组删掉即可