床前明月光 提前祝大家中秋节快乐（套用一个马老师的最简单的播放器）
本帖最后由 冬天的雨 于 2023-9-19 22:30 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1000px;
height: 600px;
background: url('https://pic.imgdb.cn/item/6509b01ac458853aef32a8ea.jpg') no-repeat center/cover;
box-shadow: 0 0 10px #333;
overflow: hidden;
position: relative;
--state: paused;
}
lz-3d {
position: absolute;
left: calc(50% - 5px);
top: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
transform: perspective(200px) rotate(var(--deg)) translate3d(var(--xx), var(--yy), var(--zz));
animation: o2C var(--du) var(--delay) infinite linear var(--state);
}
@keyframes o2C {
to { transform: perspective(200px) rotate(0) translate3d(0,0,0); }
}
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1471794903" autoplay loop></audio>
<script>
(function(){
let total = 120, ww = mydiv.offsetWidth, hh = mydiv.offsetHeight;
let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/simpleplayer.js';
document.body.appendChild(script);
Array.from({length: total}).forEach( (item,key) => {
item = document.createElement('lz-3d');
item.style.cssText += `
background: #${Math.random().toString(16).substr(-6)};
--xx: ${Math.random() * ww}px;
--yy: ${Math.random() * hh}px;
--zz: ${150 + Math.random() * 50}px;
--deg: ${360 + Math.random() * 360}deg;
--du: ${15 + Math.random() * 15}s;
--delay: ${Math.random() * -15}s;
`;
mydiv.appendChild(item);
});
script.onload = () => {
HCPlayer({
papa: '#mydiv',
player_css: 'left: 10px; bottom: 10px;',
img: {
enter: '',/* 进入全屏按钮地址 */
quit: '',/* 退出全屏按钮地址 */
play: '',/* 播放按钮地址 */
pause: '',/* 暂停按钮地址 */
}
});
}
})();
</script> 提前祝大家中秋节快乐！ 这个太简单了，直接套用的{:4_170:} 播放器和全屏切换都有，你的图品质不合适全屏观赏{:4_170:} 马黑黑 发表于 2023-9-19 22:23
播放器和全屏切换都有，你的图品质不合适全屏观赏
这个像素太低，我再去找一个图 冬天的雨 发表于 2023-9-19 22:24
这个像素太低，我再去找一个图
至少要高清品质的 马黑黑 发表于 2023-9-19 22:25
至少要高清品质的
换了一个 马黑黑 发表于 2023-9-19 22:23
播放器和全屏切换都有，你的图品质不合适全屏观赏
套用就是不动脑子{:4_170:} 冬天的雨 发表于 2023-9-19 22:31
换了一个
这个品质不错 隐藏的播放器和全屏欣赏，做的太好了，马老师你太威武了{:4_178:} 冬天的雨 发表于 2023-9-19 22:33
隐藏的播放器和全屏欣赏，做的太好了，马老师你太威武了
{:4_191:} 开始我都没有注意有播放器的，后来滑过画面播放器和全屏欣赏的呼号出来了，马老师太赞了！@马黑黑 冬天的雨 发表于 2023-9-19 22:34
开始我都没有注意有播放器的，后来滑过画面播放器和全屏欣赏的呼号出来了，马老师太赞了！@马黑黑
{:4_169:} 马黑黑 发表于 2023-9-19 22:32
这个品质不错
加了一个滤镜进去 冬天的雨 发表于 2023-9-19 22:35
加了一个滤镜进去
挺好的 马黑黑 发表于 2023-9-19 22:34
谢谢马老师，有时间玩玩很好的，感谢马老师分享源码{:4_187:} 冬天的雨 发表于 2023-9-19 22:36
谢谢马老师，有时间玩玩很好的，感谢马老师分享源码
不客气 这个制作真漂亮，感谢冬小雨的美好祝福{:4_187:} 马黑黑 发表于 2023-9-19 22:35
挺好的
求速度，千羽做图就漂亮了 马黑黑 发表于 2023-9-19 22:36
不客气
{:4_190:}
页:
[1]
2