云端漫步 发表于 4 天前

【漫步特效】两处相思同梦垅{豆包视频左上角文字隐藏代码}

<style>
#mydiv {
    margin: 150px 0 30px calc(50% - 900px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://644220.freep.cn/644220/aa/eee.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: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);   
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    z-index: 3;
    opacity: .35;/* 熊猫视频调整透明度 */
}
#new-vid {
    position: absolute;
    top: -100px;/* 豆包视频隐藏左上角文字调整 */
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    opacity: 0.95;/* 豆包视频调整透明度 */
    mix-blend-mode: normal;
    mask: none;
    -webkit-mask: none;
}
#top-png {
    position: absolute;
    width: 100%;
    height: 100%;   
    object-fit: cover;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}
video::-webkit-media-controls {
    display: none !important;
}
video {
    -webkit-appearance: none;
}
</style>
<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1329371981" autoplay loop></audio>
    <!-- 豆包视频 -->
    <video id="new-vid" src="https://644220.freep.cn/644220/qq/eee.mp4" autoplay loop muted playsinline></video>
    <!-熊猫视频->
    <video id="vid" src="https://img.tukuppt.com/video_show/10/10/84/4/6904374b11145.mp4" autoplay="" loop="" muted=""></video>
   <!-- 标题PNG图片-->
    <img id="top-png" src="https://644220.freep.cn/644220/aa/eee.png" alt="标题PNG图片">
</div>

云端漫步 发表于 4 天前

此代码如喜欢的朋友可套用,代码内用中文注解释清楚,发表时除去中文。
因代码用英文及数字组成,英文的单词结构简洁,单词语义与编程逻辑的匹配度高,
(比如 return 对应 “返回结果”、break 对应中文 “中断循环阻塞”比喻心电图峰值),
而中文降低语法设计的复杂度。非英文字符(如中文、日文)无法被识别和处理,
这就从底层决定了代码的字符基础是英文和数字。此代码保留了背景图片。以防视频失效。
<style>
#mydiv {
    margin: 150px 0 30px calc(50% - 931px);
    display: grid;
    place-items: center;
    width: 1800px;
    height: 900px;
    background: lightblue url('https://644220.freep.cn/644220/aa/eee.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: 130%;
    height: 130%;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    mask: linear-gradient(to top right, red 88%, transparent 0);   
    -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    z-index: 3;
    opacity: .35;/* 熊猫视频调整透明度 */
}
#new-vid {
    position: absolute;
    top: -100px;/* 豆包视频隐藏左上角文字调整 */
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
    opacity: 0.95;/* 豆包视频调整透明度 */
    mix-blend-mode: normal;
    mask: none;
    -webkit-mask: none;
}
#top-png {
    position: absolute;
    width: 100%;
    height: 100%;   
    object-fit: cover;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}
video::-webkit-media-controls {
    display: none !important;
}
video {
    -webkit-appearance: none;
}
</style>
<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=3321628204" autoplay loop></audio>
    <!-- 豆包视频 -->
    <video id="new-vid" src="https://644220.freep.cn/644220/qq/eee.mp4" autoplay loop muted playsinline></video>
    <!-熊猫视频->
    <video id="vid" src="https://img.tukuppt.com/video_show/10/10/84/4/6904374b11145.mp4" autoplay="" loop="" muted=""></video>
   <!-- 标题PNG图片-->
    <img id="top-png" src="https://644220.freep.cn/644220/aa/eee.png" alt="标题PNG图片">
</div>

云端漫步 发表于 4 天前

两处相思同梦垅

绿蔷薇 发表于 4 天前

洞房花烛夜~~~{:1_234:}

绿蔷薇 发表于 4 天前

动画逼真,色调漂亮喜庆,很契合古风的浪漫设定,话说这男主好帅呀~~{:S01:}

绿蔷薇 发表于 4 天前

漫步老师制作辛苦了,谢谢无私分享隐藏代码~~{:5_130:}

绿蔷薇 发表于 4 天前

今日冬至,祝漫步老师冬至欢愉,岁岁安然~~{:1_153:}

玫の玫 发表于 4 天前

欣赏漫步老师带来的精彩制作,
效果美美哒,
歌曲好听,
好音质无可挑剔!
制作辛苦,
祝创作愉快!

玫の玫 发表于 4 天前

欣赏美贴,聆听佳音。制作辛苦,祝你快乐!

景明 发表于 3 天前

整得挺浪漫的,意境真是好
页: [1] 2
查看完整版本: 【漫步特效】两处相思同梦垅{豆包视频左上角文字隐藏代码}