学习黑黑冰之星双路径播放器效果
<style>
#papa { margin: 150px 0 0 calc(50% - 721px); width: 1280px; height: 762px; background: url('https://xlaj.cn/assets/file/zp/20231109125720.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#papa::before { position: absolute; content: ''; width: 200px; height: 200px; right: 100px; bottom: 210px; background: url('data:image/svg+xml;charset=utf-8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><path d="M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z" fill="red" /></svg>'); animation: rot 8s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=407007146.mp3" autoplay loop></audio>
<script>
(function() {
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();
};
let playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
let lrcAr = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
loadJs(playerJs, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'left: 180px;top:60px;',
fs_css: 'top: -1000px; background: transparent;',
player_css: `
width: 200px;
height: 200px;
right: 100px;
bottom: 210px;
`,
path: 'm99.41157,40.00002c-32.82009,0 -59.41156,27.48662 -59.41156,61.41155s26.59146,61.41155 59.41156,61.41155s59.41156,-27.48662 59.41156,-61.41155s-26.59146,-61.41155 -59.41156,-61.41155zm0,110.937c-26.47168,0 -47.91255,-22.16264 -47.91255,-49.52544s21.44086,-49.52544 47.91255,-49.52544s47.91255,22.16264 47.91255,49.52544s-21.44086,49.52544 -47.91255,49.52544z',
btn: {left: 34, top: 80},
track: {track: 'silver', prog: 'snow'},
img: {play: '', pause: ''}
});
});
})();
</script> @马黑黑
外面的圆你那个生成svg星形图案path路径我不会，就网络找的用了 反正求速度，网络找的图，歌词以前做的，直接套了黑黑的源码，发了就下去眯一下，还可以眯20分钟{:4_173:} 亲爱的真快，我也刚做了个，还没来得及发就看到你已经先做完了{:4_173:}{:4_187:} 用这个填充后的三角形来模拟风车，这个构思好，别说，还真的很像呢{:4_173:} 小辣椒 发表于 2023-11-9 13:35
@马黑黑
外面的圆你那个生成svg星形图案path路径我不会，就网络找的用了
外面的星形和里面一样生成的啊，在黑黑前一个帖子里讲述了的。黑黑是先讲课再做实例的{:4_173:} 风力发电，最清洁的能源，亲爱的不但应用了最新代码，这个主题也很好呢{:4_199:} 这么多风车全转起来那一定特别漂亮。 红影 发表于 2023-11-9 14:02
外面的星形和里面一样生成的啊，在黑黑前一个帖子里讲述了的。黑黑是先讲课再做实例的
哦，那我都没有看清楚的 红影 发表于 2023-11-9 14:00
亲爱的真快，我也刚做了个，还没来得及发就看到你已经先做完了
哈哈，我是网络找的图，以前的歌词，直接做了个圆的路径加上去就发了 红影 发表于 2023-11-9 14:03
风力发电，最清洁的能源，亲爱的不但应用了最新代码，这个主题也很好呢
緑色，低碳，最环保的{:4_205:} 红影 发表于 2023-11-9 14:01
用这个填充后的三角形来模拟风车，这个构思好，别说，还真的很像呢
做的太急，还是有不理想的地方{:4_173:} 红影 发表于 2023-11-9 14:02
外面的星形和里面一样生成的啊，在黑黑前一个帖子里讲述了的。黑黑是先讲课再做实例的
我从来不仔细看黑黑的教程课{:4_203:}
只能以后眼睛好了再看看 梦油 发表于 2023-11-9 15:18
这么多风车全转起来那一定特别漂亮。
梦油好，这个风车是现在国家推广的緑色，环保，造福子孙万代的大工程{:4_189:} 小辣椒 发表于 2023-11-9 17:22
梦油好，这个风车是现在国家推广的緑色，环保，造福子孙万代的大工程
是啊，小辣椒朋友。这也是绿色能源啊。 小辣椒 发表于 2023-11-9 13:35
@马黑黑
外面的圆你那个生成svg星形图案path路径我不会，就网络找的用了
按自己的想法去做，这就是成功 小辣椒 发表于 2023-11-9 17:16
哦，那我都没有看清楚的
那个还是挺简单的，可以随意设置，特别好{:4_187:} 小辣椒 发表于 2023-11-9 17:17
哈哈，我是网络找的图，以前的歌词，直接做了个圆的路径加上去就发了
这首歌也很好听，很喜欢{:4_187:} 小辣椒 发表于 2023-11-9 17:18
緑色，低碳，最环保的
亲爱的由那三叶星形直接想到了风力发电，也真够敏捷的{:4_173:}