《一杯浊酒敬自己》to小辣椒(学习黑黑星形路径)
<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/654c6936c458853aef81ac00.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: 260px; height: 260px; left: 170px; bottom: 60px; background: url('data:image/svg+xml;charset=utf-8,<svg width="260" height="260" xmlns="http://www.w3.org/2000/svg"><path d="M195.00 130.00 208.53 162.53 175.96 175.96 162.53 208.53 130.00 195.00 97.47 208.53 84.04 175.96 51.47 162.53 65.00 130.00 51.47 97.47 84.04 84.04 97.47 51.47 130.00 65.00 162.53 51.47 175.96 84.04 208.53 97.47z" fill="none" stroke="OliveDrab" stroke-width="3" /></svg>'); animation: rot 8s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/06/fe32c8e9d5e195bb81e3c01a69f0b8ae.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: 'top: 10px; left: 100px;',
fs_css: 'top: -1000px; background: transparent;',
player_css: `
width: 260px;
height: 260px;
left: 170px;
bottom: 60px;
`,
path: 'M220.00 130.00 247.46 172.75 198.94 187.85 192.50 238.25 145.63 218.63 108.29 253.10 85.00 207.94 34.24 210.35 45.43 160.78 5.00 130.00 45.43 99.22 34.24 49.65 85.00 52.06 108.29 6.90 145.63 41.37 192.50 21.75 198.94 72.15 247.46 87.25z',
btn: {left: 64, top: 110},
track: {track: 'DarkKhaki', prog: 'OliveDrab'},
img: {play: '', pause: ''}
});
});
})();
</script> @小辣椒感谢亲爱的送我的好礼,正好黑黑有新代码实例帖子,一边学习一边当回礼了{:4_187:} 我把里面的星形没做填充,跟外面取相似形状也做了空的图形。
为了让播放器时间放得下,把把这个图形整体都放大了点@马黑黑谢谢黑黑的代码{:4_187:} 这样试做一下也挺好,可以更清楚这个星形怎么取了。
开始放大没有配套调整c ,图形出来就很怪异,这些个数据必须配套才行啊{:4_173:} 哈哈哈!上房啦,这是真喝醉了。 梦油 发表于 2023-11-9 15:17
哈哈哈!上房啦,这是真喝醉了。
上房才能更好地数星形{:4_173:} 哇塞~~这个就是自己按黑黑生成svg星形图案path路径制作的,亲爱的就是学习的好{:4_178:} 红影 发表于 2023-11-9 14:08
我把里面的星形没做填充,跟外面取相似形状也做了空的图形。
为了让播放器时间放得下,把把这个图形整体都 ...
漂亮,图形里外同型漂亮{:4_199:} 红影 发表于 2023-11-9 14:10
这样试做一下也挺好,可以更清楚这个星形怎么取了。
开始放大没有配套调整c ,图形出来就很怪异,这些个数 ...
亲爱的,这个我不会做,偷懒,直接网络找了{:4_173:} 歌曲第一次听,这大侠还坐房顶上了{:4_170:} 谢谢亲爱的精彩的制作,学习了{:4_179:} 红影 发表于 2023-11-9 16:02
上房才能更好地数星形
现在,在大城市里数星星也难啦。 很漂亮!欣赏! 红影 发表于 2023-11-9 14:08
我把里面的星形没做填充,跟外面取相似形状也做了空的图形。
为了让播放器时间放得下,把把这个图形整体都 ...
这是设计,按自己的想法去实现就好 小辣椒 发表于 2023-11-9 17:24
哇塞~~这个就是自己按黑黑生成svg星形图案path路径制作的,亲爱的就是学习的好
那个路径制作很方便的啊{:4_173:} 小辣椒 发表于 2023-11-9 17:25
漂亮,图形里外同型漂亮
其实不是同型,外部是9点星形,内部是8点。内部做9点感觉太密,弄了8点反倒好看呢{:4_173:} 小辣椒 发表于 2023-11-9 17:28
歌曲第一次听,这大侠还坐房顶上了
这个歌曲还挺励志的,我也是第一次听,找了个喝酒的图图就去跟着找了个歌曲{:4_173:} 小辣椒 发表于 2023-11-9 17:28
谢谢亲爱的精彩的制作,学习了
也是跟着黑黑学习的啊,都是黑黑的代码{:4_173:} 梦油 发表于 2023-11-9 17:54
现在,在大城市里数星星也难啦。
是啊,能看到的星星越来越少了。