世外桃源 发表于 2023-12-17 13:27

我也学一个简单的帖


<style>
#papa { left: -200px;
        margin: auto;
        width: 1024px;
        height: 640px;
        background: url('https://pic.imgdb.cn/item/657e8555c458853aef2633f9.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#mypic { position: absolute; top:120px; left: 400px;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="mypic" src="https://pic.imgdb.cn/item/657e852dc458853aef25b480.png" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1957061634" autoplay loop />
</div>

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

世外桃源 发表于 2023-12-17 13:27

耶~~~成功

世外桃源 发表于 2023-12-17 13:28

@幸运草

草儿来看看

世外桃源 发表于 2023-12-17 13:30

谢谢老师好分享，学习做一个{:4_187:}

梦缘 发表于 2023-12-17 14:12

好听的歌，制作漂亮，问好！{:4_187:}

红影 发表于 2023-12-17 14:38

哇，桃源也做了一个呢，黑黑激起大家学代码的兴趣了@马黑黑{:4_187:}

红影 发表于 2023-12-17 14:40

制作很漂亮，那个播放器按钮还跟底图关联，桃源厉害，做得真漂亮{:4_199:}

红影 发表于 2023-12-17 14:41

桃源这个也是第一次的代码作业呢，亮起来。多做点啊{:4_199:}

樵歌 发表于 2023-12-17 15:42

简单的帖并不简单呵{:4_187:}

东篱闲人 发表于 2023-12-17 16:08

非常漂亮！{:4_204:}

愤怒的葡萄 发表于 2023-12-17 16:15

学习了，楼主论坛里第一个音画作品吧

梦油 发表于 2023-12-17 17:37

真漂亮，真漂亮！{:5_116:}

亦是金 发表于 2023-12-17 17:42

漂亮！点赞！{:4_190:}

幸运草 发表于 2023-12-17 19:25

你滴更美，介个好{:6_220:}

幸运草 发表于 2023-12-17 19:28

原来按钮还能这么做{:6_220:}

幸运草 发表于 2023-12-17 19:28

世外桃源 发表于 2023-12-17 13:28
@幸运草

草儿来看看

来啦，很美的制作{:6_244:}

幸运草 发表于 2023-12-17 19:29

我学你的做了个网易云的视频，我去发出来

马黑黑 发表于 2023-12-17 22:31

红影 发表于 2023-12-17 14:38
哇，桃源也做了一个呢，黑黑激起大家学代码的兴趣了@马黑黑

{:4_191:}

马黑黑 发表于 2023-12-17 22:31

唱功不错哦

红影 发表于 2023-12-17 22:36

马黑黑 发表于 2023-12-17 22:31


黑黑辛苦了，总是给大家带来这么多好东西{:4_187:}
页: [1] 2 3
查看完整版本: 我也学一个简单的帖