一个文本帖子框架

马黑黑

Hello HUACHAO

马黑黑

框架代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 700px;
   
5.         min-height: 400px;
   
6.         border-radius: 16px;
   
7.         border: 3px dotted purple;
   
8.         background: #eee;
   
9.         padding: 20px;
   
10.         position: relative;
    
11.         --state: paused;
    
12. }
    
13. #mydiv::before, #mydiv::after {
    
14.         position: absolute;
    
15.         content: '';
    
16. }
    
17. #mydiv::before {
    
18.         width: 50px;
    
19.         height: 50px;
    
20.         left: calc(50% - 25px);
    
21.         bottom: 10px;
    
22.         border-radius: 50%;
    
23.         background: conic-gradient(teal,rebeccapurple,purple,tan);
    
24.         -webkit-mask: radial-gradient(transparent 3px, red 0);
    
25.         box-shadow: 0 0 4px gray;
    
26.         cursor: pointer;
    
27.         animation: rot 6s infinite linear var(--state);
    
28. }
    
29. #mydiv::after {
    
30.         content: '帖子标题';
    
31.         left: 50%;
    
32.         top: -22px;
    
33.         transform: translate(-50%);
    
34.         background: linear-gradient(purple,rebeccapurple);
    
35.         clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
    
36.         font: bold 24px/40px sans-serif;
    
37.         text-shadow: 1px 1px 2px #000;
    
38.         color: #ccc;
    
39.         padding: 0 40px;
    
40. }
    
41. @keyframes rot { to { transform: rotate(360deg); } }
    
42. </style>
    
43. 
    
44. <div id="mydiv">
    
45.         <p>Hello HUACHAO</p>
    
46. </div>
    
47. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893183597" autoplay="autoplay" loop="loop"></audio>
    
48. 
    
49. <script>
    
50. (function () {
    
51.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
52.         aud.addEventListener('play', mState, false);
    
53.         aud.addEventListener('pause', mState, false);
    
54.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
55. })();
    
56. </script>

复制代码

马黑黑

JS部分仅控制音乐播放。

帖子的文本内容，以及其他媒体内容，替代第 45 行的内容。

红影

漂亮。文本框是樵歌最喜欢的代码了。师兄快来看@樵歌  

红影

配色看着很舒服，音乐也有趣

岩新新

欣赏学习！

马黑黑

红影 发表于 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
嗯，你还需要为樵歌封装一下

上次的也不是封装啊。只是试验一下，能不能把所有的东西都加进去。

南无月

新的文本效果，这次是横着的

马黑黑

南无月 发表于 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
这个樵歌版主最喜欢了！@樵歌 快来喔！

感谢定向广播