无情画---学习帖

三月的阳光 发表于 2024-2-17 19:40

本帖最后由三月的阳光于 2024-2-17 19:41 编辑 <br /><br /><style>
#papa { margin: 100px 0 20px calc(50% - 781px); width: 1400px; height: 763px; background: lightgreen url('https://pic.imgdb.cn/item/65cb676e9f345e8d0355edf7.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: 330px; left: calc(50% - 60px); 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://pic.imgdb.cn/item/65d091049f345e8d030da9e4.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="http://music.163.com/song/media/outer/url?id=2056811636.mp3 " autoplay loop></audio>

<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: 50%; transform: translate(-50%); bottom: 50px;--bg: linear-gradient(rgba(50,205,50,.35),rgba(50,205,50,.45)); color: #fff;',
});
};
let geci = [
['4.79', '昨夜心头牵挂今朝眼底繁花',7.04],
['12.20', '曾是惊鸿照影情根难拔',6.77],
['19.33', '孤山独听雨下寒夜里把酒当茶',7.21],
['26.92', '相思何处可寄笛声夜风苍崖',7.15],
['34.45', '流水空山落霞你的身影如画',6.87],
['41.68', '幽幽空林失色心乱如麻',7.81],
['49.90', '情深难免害怕偏偏还故作豁达',6.27],
['56.50', '我早已经丢盔卸甲只想生生世世在你的耳畔悄悄说情话',7.41],
['64.30', '愿为你放下万千的荣华',3.79],
['68.29', '和你携手走天涯',3.06],
['71.51', '从青丝一路到白发',1.98],
['73.59', '且道是寻常人家',12.13],
['86.36', '不忍将满地残花踏',0.32],
['86.70', '相逢离散俱没入泥沙',3.49],
['90.37', '奈何桥畔不饮孟婆茶',3.61],
['94.17', '刻在心上是你的最美年华',6.42],
['100.93', '编辑：三月的阳光',61.56],
['165.73', '流水空山落霞你的身影如画',7.10],
['173.20', '幽幽空林失色心乱如麻',6.83],
['180.39', '情深难免害怕偏偏还故作豁达',6.94],
['187.70', '我早已经丢盔卸甲只想生生世世在你的耳畔悄悄说情话',7.23],
['195.31', '愿为你放下万千的荣华',3.82],
['199.33', '和你携手走天涯',3.25],
['202.75', '从青丝一路到白发',2.42],
['205.30', '且道是寻常人家',7.50],
['213.19', '不忍将满地残花踏',3.99],
['217.39', '相逢离散俱没入泥沙',3.88],
['221.47', '奈何桥畔不饮孟婆茶',3.63],
['225.29', '刻在心上是你的最美年华',8.02],
['233.73', '编辑：三月的阳光',5.96],
['240.00', '谢谢欣赏',4.5]
];
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>

红影发表于 2024-2-17 22:00

这个制作好漂亮，播放器按钮还是黑黑的最新效果呢。欣赏阳光哥哥好帖{:4_199:}

红影发表于 2024-2-17 22:01

暂停的时候，歌词同步和按钮都能停下，要是那个动画也能停下就好了{:4_187:}

老谟深虑 发表于 2024-2-18 09:59

欣赏老师的精美音画，点赞！收藏学习。

庶民发表于 2024-2-19 10:52

很不错的

小辣椒 发表于 2024-2-20 20:27

阳光这个帖我今天才看见

小辣椒 发表于 2024-2-20 20:38

阳光这个效果漂亮的，动图用的好，播放器换了自己的制作

小辣椒 发表于 2024-2-20 20:40

学习帖做的很认真，效果也是漂亮，赞的~~{:4_199:}

马黑黑 发表于 2024-2-20 20:59

红影发表于 2024-2-17 22:00
这个制作好漂亮，播放器按钮还是黑黑的最新效果呢。欣赏阳光哥哥好帖

记得我那个模拟搜狗图片的帖子吧？用它就行

红影发表于 2024-2-20 23:11

马黑黑发表于 2024-2-20 20:59
记得我那个模拟搜狗图片的帖子吧？用它就行

嗯嗯，记得，那个图图里的颜色很齐全。

马黑黑 发表于 2024-2-21 12:17

红影发表于 2024-2-20 23:11
嗯嗯，记得，那个图图里的颜色很齐全。

主要是动一下

红影发表于 2024-2-21 17:05

马黑黑发表于 2024-2-21 12:17
主要是动一下

是啊，我是说就可以看出那些颜色的变化了。

三月的阳光 发表于 2024-2-21 18:25

红影发表于 2024-2-17 22:01
暂停的时候，歌词同步和按钮都能停下，要是那个动画也能停下就好了

影子妹妹晚上好，我也想能让动画和歌词同步，这是只有黑黑老师才能够做到的事情~~{:4_172:}

三月的阳光 发表于 2024-2-21 18:27

红影发表于 2024-2-17 22:00
这个制作好漂亮，播放器按钮还是黑黑的最新效果呢。欣赏阳光哥哥好帖

都是黑黑老师的成就，我们只是坐享其成~~{:4_205:}

三月的阳光 发表于 2024-2-21 18:27

老谟深虑发表于 2024-2-18 09:59
欣赏老师的精美音画，点赞！收藏学习。

谢谢欣赏点赞~~{:4_190:}

三月的阳光 发表于 2024-2-21 18:28

庶民发表于 2024-2-19 10:52
很不错的

谢谢欣赏~~{:4_190:}

三月的阳光 发表于 2024-2-21 18:29

小辣椒发表于 2024-2-20 20:38
阳光这个效果漂亮的，动图用的好，播放器换了自己的制作

我是看到了师傅的帖子偷用了代码~~{:4_187:}

三月的阳光 发表于 2024-2-21 18:30

小辣椒发表于 2024-2-20 20:40
学习帖做的很认真，效果也是漂亮，赞的~~

谢谢师傅鼓励~~{:4_187:}

三月的阳光 发表于 2024-2-21 18:35

马黑黑发表于 2024-2-20 20:59
记得我那个模拟搜狗图片的帖子吧？用它就行

感谢黑黑老师的代码，现在黑师代码流行各坛~~~{:4_187:}

马黑黑 发表于 2024-2-21 19:25

三月的阳光发表于 2024-2-21 18:35
感谢黑黑老师的代码，现在黑师代码流行各坛~~~

是吗？感谢大家的认同！

页: [1] 2

花潮论坛's Archiver

无情画---学习帖