小辣椒 发表于 2024-12-8 14:07

你的万水千山 TO：亚伦

<style>
#cndpt{margin: 140px -400px ; opacity:1;
    position: relative;width: 1400px; height: 750px;
    background: url(https://wj1.zp68.com:812/lxx/yunhua/2024/07/01/51.gif)no-repeat center/cover; }
#enopg{
    position: relative;width: 1400px; height:750px;
   background: url(https://wj1.zp68.com:812/lxx/yunhua/2024/07/01/51.jpg) no-repeat center/cover;
    display:none;
}
#mypic{top:35%; left:50%;background: url(https://xlaj.cn/upfile/202411/23/an1.png)no-repeat center/cover;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#fff 1px 0px 1px );z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
    #but {width: 120px; height: 120px;}
</style>
<div id="cndpt">
<div id="enopg"></div>
<div   id="mypic">
<div id="but" onclick="pic()"></div>
</div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230326161941.mp3" autoplay loop></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
    } else {
    imgElement .style.display = 'none';
    }
}

mypic.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mypic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mypic.style.animationPlayState = 'paused');   
</script >

小辣椒 发表于 2024-12-8 14:10

用亚伦分享的代码套用一个@亚伦影音工作室

小辣椒 发表于 2024-12-8 14:10

感谢亚伦分享源码{:4_187:}

亚伦影音工作室 发表于 2024-12-8 15:17

小辣椒 发表于 2024-12-8 14:10
用亚伦分享的代码套用一个@亚伦影音工作室

辣椒的动图太漂亮了，我很懒不想去做！

起个网名好难 发表于 2024-12-8 15:38

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦油 发表于 2024-12-8 16:52

欣赏佳作，问候小辣椒。

小辣椒 发表于 2024-12-8 16:53

亚伦影音工作室 发表于 2024-12-8 15:17
辣椒的动图太漂亮了，我很懒不想去做！

谢谢亚伦源码分享，小辣椒套用玩一个

小辣椒 发表于 2024-12-8 16:54

起个网名好难 发表于 2024-12-8 15:38


谢谢难难支持，喝茶，正宗的龙井茶{:4_180:}

小辣椒 发表于 2024-12-8 16:55

梦油 发表于 2024-12-8 16:52
欣赏佳作，问候小辣椒。

谢谢梦油欣赏，小辣椒是练习亚伦分享的代码，这个是以前的旧图

小辣椒 发表于 2024-12-8 16:57

亚伦影音工作室 发表于 2024-12-8 15:17
辣椒的动图太漂亮了，我很懒不想去做！

是以前的旧图，就是这个歌图图我测试了gif和jpg格式的按钮控制效果，也是在花潮分享过，我刚才没有找到

红影 发表于 2024-12-8 17:12

这个小播很适合这个频谱动图，真漂亮。
两个小飞机也好看，所有的动图可以一键全控。{:4_187:}

红影 发表于 2024-12-8 17:12

欣赏亲爱的好帖，亚伦老师收礼开心{:4_199:}

小辣椒 发表于 2024-12-8 17:23

红影 发表于 2024-12-8 17:12
这个小播很适合这个频谱动图，真漂亮。
两个小飞机也好看，所有的动图可以一键全控。

亲爱的，这个图其实我是按黑黑的源码瞎捣鼓玩过一个点击动图停止，就是黑黑最早分享的单个播放器效果，打开是gif，停止是jpg，而且有歌词同步的，今天拿来同样玩一次亚伦的加了播放器的动图停止效果

小辣椒 发表于 2024-12-8 17:24

红影 发表于 2024-12-8 17:12
这个小播很适合这个频谱动图，真漂亮。
两个小飞机也好看，所有的动图可以一键全控。

背景是岁月的频谱制作，我用黑黑的路径加了2只小飞机进去

小九 发表于 2024-12-8 17:37

很好听，节奏强{:4_187:}

醉美水芙蓉 发表于 2024-12-8 18:39

红影 发表于 2024-12-8 19:05

小辣椒 发表于 2024-12-8 17:23
亲爱的，这个图其实我是按黑黑的源码瞎捣鼓玩过一个点击动图停止，就是黑黑最早分享的单个播放器效果，打 ...

都能达到暂停效果呢，很赞{:4_187:}

红影 发表于 2024-12-8 19:05

小辣椒 发表于 2024-12-8 17:24
背景是岁月的频谱制作，我用黑黑的路径加了2只小飞机进去

这两个小飞机很灵动，漂亮{:4_187:}

梦油 发表于 2024-12-9 10:41

小辣椒 发表于 2024-12-8 16:55
谢谢梦油欣赏，小辣椒是练习亚伦分享的代码，这个是以前的旧图

代码很神奇。我真羡慕你们。

小辣椒 发表于 2024-12-10 20:15

梦油 发表于 2024-12-9 10:41
代码很神奇。我真羡慕你们。

梦油，代码确实很神奇，但学习也是很头疼，感觉自己制作有点难度，只能套用黑黑的玩
页: [1] 2 3
查看完整版本: 你的万水千山 TO：亚伦