新疆维吾尔族民族乐器弹奏 - Despacito
<style>#papa { margin: 0 0 0 calc(50% - 731px); width: 1300px; height: 820px; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/despacito.jpg'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#myplayer { position: absolute; left: calc(50% - 120px); top: 10px; transition: filter 1s; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
#myplayer:hover { filter: hue-rotate(360deg); }
#vid { position: absolute; top: -70px; width: 1300px; height: 880px; object-fit: cover; mix-blend-mode: screen; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop autoplay></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=500374416" autoplay loop></audio>
<img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/snow.webp" alt="" title="play&pause" />
</div>
<script>
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停');
}
</script> 帖子代码（很简单）：
<style>
#papa { margin: 0 0 0 calc(50% - 652px); width: 1300px; height: 820px; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/despacito.jpg'); box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#myplayer { position: absolute; left: calc(50% - 120px); top: 10px; transition: filter 1s; cursor: pointer; animation: rotating 5s infinite linear var(--state); }
#myplayer:hover { filter: hue-rotate(360deg); }
#vid { position: absolute; top: -70px; width: 1300px; height: 880px; object-fit: cover; mix-blend-mode: screen; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop autoplay></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=500374416" autoplay loop></audio>
<img id="myplayer" src="https://638183.freep.cn/638183/t23/btn/snow.webp" alt="" title="play&pause" />
</div>
<script>
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停');
}
</script>
的确，可以简简单单的 分享美妙的演奏，谢谢！ mState 函数处理的东东可以增添，用小角逗号隔开：
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), myplayer.title = '播放'/*, '...'*/)
: (papa.style.setProperty('--state','running'), vid.play(), myplayer.title = '暂停'/*, '...'*/);
} 一款代码量少，不简单的播放器！赞！{:4_199:}欣赏学习了！{:4_190:} 代码简单，一样可以做出漂亮的效果，这个好美。尤其鼠标接触会变色，更觉得漂亮{:4_199:} 这个播放器按钮漂亮，变色就更漂亮，充满神秘感{:4_199:} 红影 发表于 2024-1-6 21:17
这个播放器按钮漂亮，变色就更漂亮，充满神秘感
新疆是很神秘的 梦油 发表于 2024-1-6 20:47
分享美妙的演奏，谢谢！
晚上好 红影 发表于 2024-1-6 21:15
代码简单，一样可以做出漂亮的效果，这个好美。尤其鼠标接触会变色，更觉得漂亮
{:4_190:} 黑黑厉害，居然一下子用了这么多丘比特箭{:4_170:} 醉美水芙蓉 发表于 2024-1-6 20:53
欣赏老师简单漂亮的播放器！
晚上好 亦是金 发表于 2024-1-6 21:02
一款代码量少，不简单的播放器！赞！欣赏学习了！
{:4_190:} 这个是不是边框有变色效果的？ 小辣椒 发表于 2024-1-6 21:27
这个是不是边框有变色效果的？
边框没有 山人 发表于 2024-1-6 20:49
mState 函数处理的东东可以增添，用小角逗号隔开：
function mState() {
其实要用好这些函数，做帖并不简单的，只是我会偷懒，捡最简单的做{:4_170:} 黑黑最近是精彩不断，分享不停的，辛苦了 小辣椒 发表于 2024-1-6 21:30
黑黑最近是精彩不断，分享不停的，辛苦了
这个简单的
页:
[1]
2