人静
<style>#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; }
#tit { position: absolute; left: 20px; top: 20px; font: bold 3em sans-serif; color: #ccc; text-shadow: 2px 2px 4px #fcfcfc; letter-spacing: 2px; }
#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; }
#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; }
@keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
</style>
<div id="papa">
<span id="tit">姬神·人静</span>
<span id="btnplay" title="播放/暂停"></span>
</div>
<script>
(function() {
let aud = new Audio();
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/21/147c882d5501cd40049e330dfcbb444f.mp3';
aud.loop = true;
aud.play();
btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
btnplay.onclick = () => mplay();
let mplay = () => aud.paused ? (aud.play(), btnplay.style.animationPlayState = 'running') : (aud.pause(), btnplay.style.animationPlayState = 'paused');
}());
</script>
完整代码
<style>
#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; }
#tit { position: absolute; left: 20px; top: 20px; font: bold 3em sans-serif; color: #ccc; text-shadow: 2px 2px 4px #fcfcfc; letter-spacing: 2px; }
#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; }
#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; }
@keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
</style>
<div id="papa">
<span id="tit">姬神·人静</span>
<span id="btnplay" title="播放/暂停"></span>
</div>
<script>
(function() {
let aud = new Audio();
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/03/21/147c882d5501cd40049e330dfcbb444f.mp3';
aud.loop = true;
aud.play();
btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
btnplay.onclick = () => mplay();
let mplay = () => aud.paused ? (aud.play(), btnplay.style.animationPlayState = 'running') : (aud.pause(), btnplay.style.animationPlayState = 'paused');
}());
</script>
本帖最后由 马黑黑 于 2022-10-9 07:46 编辑
本帖配合 手把手教小白用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，鼠标移动到播放器区域时会有提示文本弹出。
二、其他
有时，一个帖子，有一张底图、一支音乐、一个标题、一个音乐控制按钮就够了。也许，关键是创意，亦即，我们想表达什么、用什么方式表达。炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。
音画帖不只是为了音画，不仅仅只是依赖技术。技术是实现表达的手段之一，不是全部，但技术不可或缺。技术可以是复杂的，也可以是简单的。
本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自动播放，就可以立马听到美妙的音乐；如果浏览器不支持声音的自动播放，访问者如果被月球播放器吸引，会将鼠标指针移动到其上，会发现文本提示，会点击它。 这个非常简洁，却意境悠远，非常引人入胜{:4_187:} “炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。”
说得有道理，做帖子主要是表达自己的情感，不是为了做而做。 呀不是为了操控伪元素，这个帖子的代码还要少，简洁的内容组织得好，一样令人陶醉。关键还在于它所展开的意境，犹如古人说的，对一张琴，一壶酒，一溪云，便风光无限{:4_199:} 这首一人静曾经特别喜欢。 又出新的教程了。{:4_199:} 醉美水芙蓉 发表于 2022-10-9 11:29
欣赏黑黑老师新作品！
{:4_190:} 有创意的播放器按钮，赞！
<style>
#divt1{background-image:url(https://pic1.imgdb.cn/item/63417abb16f2c2beb1075797.gif); background-size:cover; width:800px; height:200px; font-size:50px; text-align:center; font-weight:bold; line-height:200px; color:transparent; -webkit-background-clip:text; border:0px #FF4A20 solid; }
</style>
<div id="divt1">谢谢分享！欣赏、学习、点赞！</div>
哦，回头看老师的讲解才知道#btnplay::before的作用。开始查看源代码时，没看老师的讲解，觉得这句是多余的。{:5_117:} 马黑黑 发表于 2022-10-9 07:43
本帖配合 手把手教小白用JS做一个简单实用的音频播放器 教程演示简单类型的音画帖效果，下面做一些必要说明 ...
“有时，一个帖子，有一张底图、一支音乐、一个标题、一个音乐控制按钮就够了。也许，关键是创意，亦即，我们想表达什么、用什么方式表达。炫酷的效果固然重要，不过，极简的风格也能表达我们想要表达的意思。”
可对我们这些初学者，首先是学习有关知识（html、css、JS），连门都没入，谈何创意、炫酷？！{:5_117:} 马黑黑 发表于 2022-10-9 07:50
本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自 ...
一天手机晃荡下来，现在才看见这个帖{:4_178:} 马黑黑 发表于 2022-10-9 07:50
本帖，不论浏览器是否支持自动播放声音，都能提供友好的交互操作。访问者打开帖子，如果浏览器支持声音的自 ...
这个就是我看见私房菜的那个效果吧，晚上再上来看看了 谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了{:4_178:}@千羽 本帖最后由 千羽 于 2022-10-9 18:37 编辑
小辣椒 发表于 2022-10-9 17:44
谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了@千羽
谢谢小辣椒啦，可是我的信心不足啊，我先试试哈{:4_173:} 小辣椒 发表于 2022-10-9 17:44
谢谢黑黑的精彩不断，这个就是玩音画人可以的播放器，太好了@千羽
谢谢管理员的支持
页:
[1]
2