楼主: 花简静

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

[复制链接]
发表于 2024-12-22 10:17 | 显示全部楼层
本帖最后由 花简静 于 2025-5-17 09:06 编辑

点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
本帖最后由 花简静 于 2024-12-22 18:28 编辑

<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/095242bpfko0aohbbtibil.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: 60%;     height: 60%;     right:26%;     top:30%;     object-fit: cover;     pointer-events: none;     mix-blend-mode:multiply; -webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);     z-index: 2;     opacity: .95; } </style> <div id="mydiv">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27571238" autoplay loop></audio>     <video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/86/5b965d62e5483.mp4" autoplay="" loop="" muted=""></video> </div>
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
本帖最后由 花简静 于 2024-12-22 21:04 编辑

说明:
视频有时候不需要全屏显示,在中间的话,边缘硬度影响观感,就需要把边缘虚化,使其更好与背景融合
用第24行代码完成
-webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);

特别说明的是:
因为视频背景是白色的,
用了滤镜正片叠底mix-blend-mode:multiply;
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

发表于 2024-12-22 10:17 | 显示全部楼层
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-3 18:58

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表