一个文本帖子框架
<style>#mydiv {
margin: 20px auto;
width: 700px;
min-height: 400px;
border-radius: 16px;
border: 3px dotted purple;
background: #eee;
padding: 20px;
position: relative;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
width: 50px;
height: 50px;
left: calc(50% - 25px);
bottom: 10px;
border-radius: 50%;
background: conic-gradient(teal,rebeccapurple,purple,tan);
-webkit-mask: radial-gradient(transparent 3px, red 0);
box-shadow: 0 0 4px gray;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
content: '帖子标题';
left: 50%;
top: -22px;
transform: translate(-50%);
background: linear-gradient(purple,rebeccapurple);
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
font: bold 24px/40px sans-serif;
text-shadow: 1px 1px 2px #000;
color: #ccc;
padding: 0 40px;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<p>Hello HUACHAO</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893183597" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
框架代码
<style>
#mydiv {
margin: 20px auto;
width: 700px;
min-height: 400px;
border-radius: 16px;
border: 3px dotted purple;
background: #eee;
padding: 20px;
position: relative;
--state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
width: 50px;
height: 50px;
left: calc(50% - 25px);
bottom: 10px;
border-radius: 50%;
background: conic-gradient(teal,rebeccapurple,purple,tan);
-webkit-mask: radial-gradient(transparent 3px, red 0);
box-shadow: 0 0 4px gray;
cursor: pointer;
animation: rot 6s infinite linear var(--state);
}
#mydiv::after {
content: '帖子标题';
left: 50%;
top: -22px;
transform: translate(-50%);
background: linear-gradient(purple,rebeccapurple);
clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
font: bold 24px/40px sans-serif;
text-shadow: 1px 1px 2px #000;
color: #ccc;
padding: 0 40px;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<p>Hello HUACHAO</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893183597" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
JS部分仅控制音乐播放。
帖子的文本内容，以及其他媒体内容，替代第 45 行的内容。 漂亮。文本框是樵歌最喜欢的代码了。师兄快来看@樵歌{:4_187:} 配色看着很舒服，音乐也有趣{:4_187:} 欣赏学习！ 红影 发表于 2023-6-25 14:47
配色看着很舒服，音乐也有趣
配色应根据需要修改 红影 发表于 2023-6-25 14:43
漂亮。文本框是樵歌最喜欢的代码了。师兄快来看@樵歌
嗯，你还需要为樵歌封装一下 岩新新 发表于 2023-6-25 14:48
欣赏学习！
下午好 这是链接音乐网站的歌曲吧，像我这样的唱是不能链接的吧，这播放器蛮好玩的 马黑黑 发表于 2023-6-25 15:52
配色应根据需要修改
是的，可以选择自己喜欢的颜色。 马黑黑 发表于 2023-6-25 15:53
嗯，你还需要为樵歌封装一下
上次的也不是封装啊。只是试验一下，能不能把所有的东西都加进去。{:4_173:} 新的文本效果，这次是横着的{:4_187:} 南无月 发表于 2023-6-25 17:43
新的文本效果，这次是横着的
横竖都可以 上海朝阳 发表于 2023-6-25 16:17
这是链接音乐网站的歌曲吧，像我这样的唱是不能链接的吧，这播放器蛮好玩的
媒体来源牢靠就好，音频视频不论 红影 发表于 2023-6-25 17:25
上次的也不是封装啊。只是试验一下，能不能把所有的东西都加进去。
樵歌需要个较为齐全的封装 红影 发表于 2023-6-25 17:24
是的，可以选择自己喜欢的颜色。
也应根据主题来 醉美水芙蓉 发表于 2023-6-25 16:56
这个樵歌版主最喜欢了！@樵歌 快来喔！
感谢定向广播{:4_170:}