人静

马黑黑

姬神·人静

马黑黑

完整代码

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/kongjing.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
   
3. #tit { position: absolute; left: 20px; top: 20px; font: bold 3em sans-serif; color: #ccc; text-shadow: 2px 2px 4px #fcfcfc; letter-spacing: 2px; }
   
4. #btnplay { position: absolute; bottom: 40px; left: 100px; width: 100px; height: 100px; border-radius: 50%; box-shadow: 20px 15px 0 0 yellow; cursor: pointer; animation: swing 1s linear infinite alternate; }
   
5. #btnplay::before { position: absolute; content: ''; left: 20px; top: 15px; width: 100%; height: 100%;  }
   
6. #btnplay::after { position: absolute; content: ''; left: 30px; top: 30px; width: 40%; height: 40%; border-radius: 50%; background: yellow; box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 snow; }
   
7. @keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <span id="tit">姬神·人静</span>
    
12.         <span id="btnplay" title="播放/暂停"></span>
    
13. </div>
    
14. 
    
15. <script>
    
16. (function() {
    
17.         let aud = new Audio();
    
18.         aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/21/147c882d5501cd40049e330dfcbb444f.mp3';
    
19.         aud.loop = true;
    
20.         aud.play();
    
21.         btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
    
22.         btnplay.onclick = () => mplay();
    
23.         let mplay = () => aud.paused ? (aud.play(), btnplay.style.animationPlayState = 'running') : (aud.pause(), btnplay.style.animationPlayState = 'paused');
    
24. }());
    
25. </script>
    

复制代码

马黑黑

本帖配合 手把手教小白用JS做一个简单实用的音频播放器 教程演示简单类型的音画帖效果，下面做一些必要说明：

一、播放器按钮 CSS 代码：

#btnplay {
        position: absolute;
        bottom: 40px;
        left: 100px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 20px 15px 0 0 yellow;
        cursor: pointer;
        animation: swing 1s linear infinite alternate;
}


这是利用 box-shadow 模拟月牙结构。因为阴影不是实体，无法对它单击，所以，再用伪元素做个可接受单击的区域，移动都能覆盖月牙阴影处：

#btnplay::before {
        position: absolute;
        content: '';
        left: 20px;
        top: 15px;
        width: 100%;
        height: 100%;
}


孤单单的月牙能抽象体现“人静”的氛围，不过，太单调，所以，再用一个伪元素给月牙弄个“伴星”，令按钮形成组合形态，看着，可能会有这么一种感觉：“人静”的氛围下，我们虽则孤独，但我们心灵丰厚、踏实：

#btnplay::after {
        position: absolute;
        content: '';
        left: 30px;
        top: 30px;
        width: 40%;
        height: 40%;
        border-radius: 50%;
        background: yellow;
        box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 snow;
}


月牙的设计逻辑是：音乐播放时，它摇摆，音乐没有播放时，它静止。月牙使用 span 标签渲染，HTML里还提供了 title，鼠标移动到播放器区域时会有提示文本弹出。

二、其他

有时，一个帖子，有一张底图、一支音乐、一个标题、一个音乐控制按钮就够了。也许，关键是创意，亦即，我们想表达什么、用什么方式表达。炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。

音画帖不只是为了音画，不仅仅只是依赖技术。技术是实现表达的手段之一，不是全部，但技术不可或缺。技术可以是复杂的，也可以是简单的。

马黑黑

本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自动播放，就可以立马听到美妙的音乐；如果浏览器不支持声音的自动播放，访问者如果被月球播放器吸引，会将鼠标指针移动到其上，会发现文本提示，会点击它。

红影

这个非常简洁，却意境悠远，非常引人入胜

红影

“炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。”
说得有道理，做帖子主要是表达自己的情感，不是为了做而做。

红影

呀不是为了操控伪元素，这个帖子的代码还要少，简洁的内容组织得好，一样令人陶醉。关键还在于它所展开的意境，犹如古人说的，对一张琴，一壶酒，一溪云，便风光无限

红影

这首一人静曾经特别喜欢。

加林森

又出新的教程了。

马黑黑

醉美水芙蓉 发表于 2022-10-9 11:29
欣赏黑黑老师新作品！

相约爱晚亭

有创意的播放器按钮，赞！

寒冬残荷

谢谢分享！欣赏、学习、点赞！

寒冬残荷

哦，回头看老师的讲解才知道#btnplay::before的作用。开始查看源代码时，没看老师的讲解，觉得这句是多余的。

寒冬残荷

马黑黑 发表于 2022-10-9 07:43
本帖配合 手把手教小白用JS做一个简单实用的音频播放器 教程演示简单类型的音画帖效果，下面做一些必要说明 ...

“有时，一个帖子，有一张底图、一支音乐、一个标题、一个音乐控制按钮就够了。也许，关键是创意，亦即，我们想表达什么、用什么方式表达。炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。”

可对我们这些初学者，首先是学习有关知识（html、css、JS），连门都没入，谈何创意、炫酷？！

小辣椒

马黑黑 发表于 2022-10-9 07:50
本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自 ...

一天手机晃荡下来，现在才看见这个帖

小辣椒

马黑黑 发表于 2022-10-9 07:50
本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自 ...

这个就是我看见私房菜的那个效果吧，晚上再上来看看了

小辣椒

谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了@千羽

千羽

小辣椒 发表于 2022-10-9 17:44
谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了@千羽

谢谢小辣椒啦，可是我的信心不足啊，我先试试哈

马黑黑

小辣椒 发表于 2022-10-9 17:44
谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了@千羽

谢谢管理员的支持