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

云端漫步

云端漫步

此代码如喜欢的朋友可套用，代码内用中文注解释清楚，发表时除去中文。
因代码用英文及数字组成，英文的单词结构简洁，单词语义与编程逻辑的匹配度高，
（比如 return 对应 “返回结果”、break 对应中文 “中断循环阻塞”比喻心电图峰值），
而中文降低语法设计的复杂度。非英文字符（如中文、日文）无法被识别和处理，
这就从底层决定了代码的字符基础是英文和数字。此代码保留了背景图片。以防视频失效。

1. <style>
   
2. #mydiv {
   
3.     margin: 150px 0 30px calc(50% - 931px);
   
4.     display: grid;
   
5.     place-items: center;
   
6.     width: 1800px;
   
7.     height: 900px;
   
8.     background: lightblue url('https://644220.freep.cn/644220/aa/eee.jpg') no-repeat center/cover;
   
9.     box-shadow: 3px 3px 20px #000;/* 背景图片 */
   
10.     user-select: none;
    
11.     overflow: hidden;
    
12.     position: relative;
    
13.     z-index: 1;  
    
14. }
    
15. #vid {
    
16.     position: absolute;
    
17.     width: 130%;
    
18.     height: 130%;
    
19.     object-fit: cover;
    
20.     pointer-events: none;
    
21.     mix-blend-mode: screen;
    
22.     mask: linear-gradient(to top right, red 88%, transparent 0);   
    
23.     -webkit-mask: linear-gradient(to top right, red 88%, transparent 0);   
    
24.     z-index: 3;
    
25.     opacity: .35;/* 熊猫视频调整透明度 */
    
26. }
    
27. #new-vid {
    
28.     position: absolute;
    
29.     top: -100px;/* 豆包视频隐藏左上角文字调整 */
    
30.     left: 0;
    
31.     width: 100%;
    
32.     height: calc(100% + 100px);
    
33.     object-fit: cover;
    
34.     pointer-events: none;
    
35.     z-index: 2;
    
36.     opacity: 0.95;/* 豆包视频调整透明度 */
    
37.     mix-blend-mode: normal;
    
38.     mask: none;
    
39.     -webkit-mask: none;
    
40. }
    
41. #top-png {
    
42.     position: absolute;
    
43.     width: 100%;
    
44.     height: 100%;   
    
45.     object-fit: cover;
    
46.     pointer-events: none;
    
47.     z-index: 5;
    
48.     opacity: 1;
    
49. }
    
50. video::-webkit-media-controls {
    
51.     display: none !important;
    
52. }
    
53. video {
    
54.     -webkit-appearance: none;
    
55. }
    
56. </style>
    
57. <div id="mydiv">
    
58.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=3321628204" autoplay loop></audio>
    
59.     <!-- 豆包视频 -->
    
60.     <video id="new-vid" src="https://644220.freep.cn/644220/qq/eee.mp4" autoplay loop muted playsinline></video>
    
61.     <!-熊猫视频->
    
62.     <video id="vid" src="https://img.tukuppt.com/video_show/10/10/84/4/6904374b11145.mp4" autoplay="" loop="" muted=""></video>
    
63.      <!-- 标题PNG图片  -->
    
64.     <img id="top-png" src="https://644220.freep.cn/644220/aa/eee.png" alt="标题PNG图片">
    
65. </div>

复制代码

云端漫步

两处相思同梦垅

绿蔷薇

洞房花烛夜~~~

绿蔷薇

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

绿蔷薇

漫步老师制作辛苦了，谢谢无私分享隐藏代码~~

绿蔷薇

今日冬至，祝漫步老师冬至欢愉，岁岁安然~~

玫の玫

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

玫の玫

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