垄上行 TO：红影 （学习黑黑Spring播放器效果）
<style>
#papa { margin: 150px 0 20px calc(50% - 781px); width: 1400px; height: 763px; background: lightgreen url('https://xlaj.cn/assets/file/zp/20240216193952.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa > img { position: absolute; transform: translate(1200px, -50px) rotate(-35deg); width: 80px;top:-90px; filter: hue-rotate(120deg); animation: fly 10s linear infinite var(--state); }
#papa > img:nth-of-type(2) { filter: hue-rotate(180deg); animation-delay: -5s; }
#iplay { position: absolute; bottom: 35px; left: calc(50% - 90px); width: 100px; height: 100px; border-style: dotted double ridge; border-color: orange red; border-width: 10px; border-radius: 50%; outline: 10px double olive; outline-offset: 2px; animation: flash .4s linear infinite alternate var(--state); cursor: pointer; }
#iplay::before { position: absolute; content: ''; inset: -10px; border-radius: 20%; background: url('https://xlaj.cn/assets/file/zp/20240216193928.png ') no-repeat center/cover; z-index: -1; animation: rotating 10s linear infinite var(--state); }
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20240216193835.mp3 " autoplay loop></audio>
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<div id="iplay"></div>
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#iplay',
lrc_css: 'left: 60%; transform: translate(-50%); bottom: 310px;--bg: linear-gradient(rgba(50,205,50,.35),rgba(50,205,50,.45)); color: #fff;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(iplay.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
iplay.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
iplay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
}
</script>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@红影
亲爱的，辛苦了，勤劳的小蜜蜂，今天学习黑黑的Spring播放器效果做一个，喜欢这燕子的效果，黑黑帖子的意境也是美，白天看见就喜欢，赶快做一个作业了{:4_170:} @马黑黑
黑黑，昨天那歌词同步没有做好，播放器按钮不能停止，今天捣鼓了一下，成功了{:4_170:} 这里的风景真美，谢谢亲爱的，美女的裙子是飘拂的，还有飘动的粒子，这制作好漂亮{:4_199:} 红影 发表于 2024-2-16 19:57
这里的风景真美，谢谢亲爱的，美女的裙子是飘拂的，还有飘动的粒子，这制作好漂亮
亲爱的，你速度的{:4_170:} 谢谢亲爱的好帖，按钮里换的图案也好美呢{:4_187:} 红影 发表于 2024-2-16 19:59
谢谢亲爱的好帖，按钮里换的图案也好美呢
这个是雪花的图图自己加工了一下 我也准备从垄上走过，有亲爱的相陪会更快乐{:4_179:} 红影 发表于 2024-2-16 20:01
我也准备从垄上走过，有亲爱的相陪会更快乐
哈哈~~~好啊，一起手挽手{:4_172:} 小辣椒 发表于 2024-2-16 19:55
@马黑黑
黑黑，昨天那歌词同步没有做好，播放器按钮不能停止，今天捣鼓了一下，成功了
这个本身不是什么难题 哇塞，小辣椒太神了奇了！满图图都是亮点。那美女飘舞的裙摆，飞翔可爱的小燕子（最喜欢的），播放器也做得极好。{:4_178:} 这歌貌似是某年春晚香港老一代歌手张明敏每一次唱就把俺给迷倒了{:4_196:} 少了一道水印{:4_173:} 小辣椒 发表于 2024-2-16 19:58
亲爱的，你速度的
有好礼收，必须跑得飞快{:4_170:} 小辣椒 发表于 2024-2-16 20:00
这个是雪花的图图自己加工了一下
有着对称之美，很赞{:4_187:} 小辣椒 发表于 2024-2-16 20:24
哈哈~~~好啊，一起手挽手
春天来了，一起去看风景{:4_185:} 又听到垄上行了，谢谢小辣椒朋友。 构思巧妙，制作精美。 醉美水芙蓉 发表于 2024-2-16 20:29
欣赏小辣椒漂亮的音画！
问好水芙蓉，谢谢欣赏{:4_171:}