五星红旗 （学习黑黑 梦驼铃五角星路径播放器）
<style>
#papa { margin: 150px 0 0 calc(50% - 781px); width: 1400px; height: 700px; background: url('https://xlaj.cn/assets/file/zp/20230928225011.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#sky { position: absolute; width: 100%; height: 20%; top: 0; left: 0; }
#dt1{ position: absolute; width: 150px; height: 180px; top: 140px; left: 40px; }
#dt2{ position: absolute; width: 150px; height: 180px; top: 120px; left: 280px; }
#dt3{ position: absolute; width: 499px; height: 356px; top: 50px; left: 850px; }
#dt4{ position: absolute; width: 150px; height: 180px; top: 50px; left: 100px; }
#ship { position: absolute; width: 100%; height: 120%;object-fit: cover; pointer-events: none;z-index: 2; opacity: 0.3; }
</style>
<div id="papa">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20230928225044.gif" alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20230928225044.gif" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20230928225105.jpg" alt="" />
<img id="dt4" src="https://xlaj.cn/assets/file/zp/20230928225044.gif" alt="" />
<video id="ship" src="https://img.tukuppt.com/video_show/2269348/00/02/39/5b5de4f167c06.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="sky"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307601348" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'bottom: 20px;color: Gold; --bg: linear-gradient(rgba(255,0,0,.4),rgba(255,0,0,.7));',
fs_css: 'color: #eee; background: transparent;',
player_css: 'width: 240px; height: 240px; top: 10px;',
path: 'm8.99999,94.26882l84.79706,0l26.20295,-83.26881l26.20296,83.26881l84.79705,0l-68.60214,51.46237l26.2043,83.26881l-68.60217,-51.46377l-68.60215,51.46377l26.20431,-83.26881l-68.60216,-51.46237z',
btn: {left: 54, top: 100},
track: {track: 'Gold', prog: 'red'},
img: {
play: 'https://638183.freep.cn/638183/web/svg/play_red.svg',
pause: 'https://638183.freep.cn/638183/web/svg/pause_red.svg'
}
});
});
loadJs(js2, () => {
H5lz({
papa: '#sky',
total: 10,
size: {width: 36, height: 32},
shape: {background: 'url("https://638183.freep.cn/638183/web/svg/birdmoon.svg") no-repeat center/cover', borderRadius: '0'},
ani: 'toLeft',
maxTime: 30,
offset: {x: 0, y: 0},
});
});
})();
</script> @马黑黑
黑黑，昨天发现这个五角星路径非常漂亮，但这些svg我捣鼓不了，就只能套用了 谢谢黑黑的精彩源码分享，祝双节快乐！ 祝福祖国74周年华诞，也是祝祖国更加繁荣昌盛，越来越强大{:4_204:}{:4_204:} 这个制作很大气磅礴。借亲爱的好帖，同祝伟大祖国74周年华诞{:4_178:} 红影 发表于 2023-9-28 23:04
这个制作很大气磅礴。借亲爱的好帖，同祝伟大祖国74周年华诞
亲爱的，这个五角星路径效果很美，但黑黑的svg我许多不懂，自己改不好，就套用了 小辣椒 发表于 2023-9-28 23:07
亲爱的，这个五角星路径效果很美，但黑黑的svg我许多不懂，自己改不好，就套用了
虽然是套用五角星，亲爱的背景和视频运用也制作得很棒呢{:4_199:} 红影 发表于 2023-9-28 23:09
虽然是套用五角星，亲爱的背景和视频运用也制作得很棒呢
加了几个效果进去{:4_173:} 小辣椒 发表于 2023-9-28 23:14
加了几个效果进去
是的，这些效果特别精彩{:4_199:} 红影 发表于 2023-9-28 23:19
是的，这些效果特别精彩
这些效果加上去，整体效果就出来了 师傅，又出新作大作~~{:5_116:}{:5_116:} 小辣椒 发表于 2023-9-28 23:21
这些效果加上去，整体效果就出来了
非常大气，太漂亮了{:4_204:} 三月的阳光 发表于 2023-9-28 23:25
师傅，又出新作大作~~
套用黑黑的源码做一个，你也是可以做的，直接套用代码 雄壮 马黑黑 发表于 2023-9-28 23:36
雄壮
黑黑晚上好，我刚准备下，明天见了 小辣椒 发表于 2023-9-28 23:44
黑黑晚上好，我刚准备下，明天见了
88 欣赏欣赏 中秋节快乐！ 祝伟大祖国繁荣昌盛
祝小辣椒阖家欢乐幸福安康 梦油 发表于 2023-9-29 10:53
祝伟大祖国繁荣昌盛
祝小辣椒阖家欢乐幸福安康
谢谢梦油，我们一起祝福祖国繁荣昌盛{:4_374:}
页:
[1]
2