流水落花（玩9:16比例视频溶合于16:9视频的代码）
<style>
#papa{position:relative; margin:30px 30px; left:calc(50% - 81px); transform:translateX(-50%); width:1400px; height:787px; aspect-ratio:16/9; box-shadow:0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow:hidden; display:grid; place-items:center; user-drag:none; user-select:none; }
/* 全屏 */
#fullscreen {position:absolute; top:3%; right:3%; font:normal 2em 楷体; color:#ff0000; cursor:pointer; z-index:10; opacity:1; }
#papa:hover #fullscreen {display:block; opacity:1; }
/* 16:9是熊猫视频右上角有字，要上移隐藏 */
#vid{position:absolute; width:100%; height:110%; object-fit:cover; pointer-events:none;left:0px;z-index:1; margin-top:-5%;}
/* 放置9:16视频的容器 */
#shiping {position:absolute; width:40%; height:121%; overflow:hidden; cursor:pointer; margin-top:-90px; z-index:2;}
/* 9:16的视频，用径向遮罩羽化边缘，让它溶于16:9的熊猫视频 */
#vido {width:100%; height: 100%; float: left; -webkit-mask: radial-gradient(closest-side, red, red, transparent); transform:rotateX(0deg); z-index:2;}
/*文字*/
#wz1{position:absolute; width:400px; height: 300px; top:40px; left:0px; z-index:11; color:#ff0000; border:0px solid #ffd700; text-align:center; font: normal 40px/1.2 华文行楷; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #f00; background-image:url('https://z3.ax1x.com/2021/09/13/4PAYtI.gif'); background-repeat:repeat; }
</style>
<div id="papa" >
<span id="fullscreen">全屏</span>
<div id="wz1">帘外雨潺潺，<br>春自阑珊。<br>罗衾不暖五更寒，<br>已不容知见时难。<br>流水落花，春去也，<br>天上人间。</div>
<!-- 背景视频 16:9 -->
<video id="vid" autoplay="" loop="" muted="" playsinline src="https://img.tukuppt.com/video_show/3664703/00/02/08/5b50429f4d118.mp4"> </video>
<!--9:16的视频 -->
<div id="shiping">
<video id="vido" class="vido" autoplay="" loop="" playsinline controls="controls" src="http://txmov2.a.kwimgs.com/ksc1/P-6rq_SvVcS9Bg2FWA0cVS9zwnPWTk7vCFhhOfz4TWDUgCV82XvFwahBydX7UwtdND7HqLDTxfaOARsZga3xHI6mqEEldmK_ha8Oexl5bLpBmmjoUmBRyWCnNQf-dPqdqJwGggaWoL6pEAun2CnJl1pWJWFMmdBD1vbo9oDMwli7-X3L-iu97JKU9eFwhKf3.mp4" > </video>
</div>
</div>
<div style="height:70px;"> </div>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
用字节跳动推出的AI视频生成模型Seedance 2.0（于2026年2月7日开始小范围内测，并于2026年2月12日正式发布）生成的一个9:16小视频，用代码把它置于16:9的视频中，让竖屏视频看起来似横屏视频{:5_106:}
有的浏览器不支持css的遮罩属性看不到效果！ 小视频的提示词是从李煜的《浪淘沙令·帘外雨潺潺》诗词改动来的{:5_106:}
口型对得很好啊。{:5_116:} 这样的融合很好啊，非常自在。
欣赏寒冬残荷好帖{:4_187:}
页:
[1]