【漫步特效】两处相思同梦垅{豆包视频左上角文字隐藏代码}
<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> 此代码如喜欢的朋友可套用,代码内用中文注解释清楚,发表时除去中文。
因代码用英文及数字组成,英文的单词结构简洁,单词语义与编程逻辑的匹配度高,
(比如 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> 两处相思同梦垅 洞房花烛夜~~~{:1_234:} 动画逼真,色调漂亮喜庆,很契合古风的浪漫设定,话说这男主好帅呀~~{:S01:} 漫步老师制作辛苦了,谢谢无私分享隐藏代码~~{:5_130:} 今日冬至,祝漫步老师冬至欢愉,岁岁安然~~{:1_153:} 欣赏漫步老师带来的精彩制作,
效果美美哒,
歌曲好听,
好音质无可挑剔!
制作辛苦,
祝创作愉快! 欣赏美贴,聆听佳音。制作辛苦,祝你快乐! 整得挺浪漫的,意境真是好
页:
[1]
2