另一个帖子框架（to樵歌）

马黑黑

段落一

段落二

资料/网络
2023年6月27日

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 30px auto;
   
4.         padding: 20px 10px;
   
5.         width: 90%;
   
6.         min-height: 400px;
   
7.         border: 1px solid var(--fColor);
   
8.         color: var(--fColor);
   
9.         background: var(--bgMain);
   
10.         position: relative;
    
11.         pointer-events: none;
    
12.         --bgMain: linear-gradient(snow,lightgreen,snow);
    
13.         --bgTitle: lightgreen;
    
14.         --fColor: black;
    
15.         --btnWidth: 40px;
    
16.         --state: paused;
    
17. }
    
18. #mydiv::before, #mydiv::after { position: absolute; content: ''; }
    
19. #mydiv::before {
    
20.         padding: 0 20px;
    
21.         content: '帖子标题';
    
22.         left: 15px;
    
23.         top: -18px;
    
24.         font: bold 24px / 36px sans-serif;
    
25.         text-shadow: 1px 1px 2px #111;
    
26.         border: inherit;
    
27.         background: var(--bgTitle);
    
28. }
    
29. #mydiv::after {
    
30.         width: var(--btnWidth);
    
31.         height: var(--btnWidth);
    
32.         background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
    
33.         border-radius: 50%;
    
34.         bottom: calc(var(--btnWidth) / -2);
    
35.         left: calc(50% - var(--btnWidth) / 2);
    
36.         cursor: pointer;
    
37.         pointer-events: auto;
    
38.         animation: rot 5s infinite linear var(--state);
    
39. }
    
40. #mydiv p { padding: 10px 0; font-size: 16px; }
    
41. .txtRight { position: absolute; text-align: center; right: 10px; bottom: -10px; }
    
42. .txtMid { text-align: center; }
    
43. @keyframes rot { to { transform: rotate(360deg); } }
    
44. </style>
    
45. 
    
46. <div id="mydiv">
    
47.         <p>段落一</p>
    
48.         <p class="txtMid"><img src="https://638183.freep.cn/638183/2-0.gif" alt="" /></p>
    
49.         <p>段落二</p>
    
50.         <p class="txtRight">资料/网络<br>2023年6月27日</p>
    
51. </div>
    
52. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" autoplay="autoplay" loop="loop"></audio>
    
53. 
    
54. <script>
    
55. (function () {
    
56.         let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
57.         aud.addEventListener('play', mState, false);
    
58.         aud.addEventListener('pause', mState, false);
    
59.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
60. })();
    
61. </script>
    

复制代码

马黑黑

颜色及其他相关配置：

        --bgMain: linear-gradient(snow,lightgreen,snow); /* 正文背景色 */
        --bgTitle: lightgreen; /* 标题背景色 */
        --fColor: black;  /* 文本和边框颜色 */
        --btnWidth: 40px;  /* 播放按钮尺寸 */

小文

先收藏下来备用，谢谢先生！

马黑黑

小文 发表于 2023-6-28 13:20
先收藏下来备用，谢谢先生！

文本有几个段落，就用多少个 <p>文本</p>，每一个<p>...</p>占一行。

像诗歌，有分行和段落的约定，比如两个段落的诗歌：

<p>句一<br>句二<br><句三<br>句四</p>
<p>句五<br>句六<br>句七><br>句八</p>
上面的 <br> 标签，就是换行

小文

马黑黑 发表于 2023-6-28 13:16
颜色及其他相关配置：

        --bgMain: linear-gradient(snow,lightgreen,snow); /* 正文背景色 */

我看上那个紫罗兰的框，但楼上这个框中动着的图像我不想要，就想要个框。

马黑黑

小文 发表于 2023-6-28 13:20
先收藏下来备用，谢谢先生！

5楼，文本的代码也可以写成这样，方便修改文本内容：

<p>
    句一<br>
    句二<br>
    句三><br>
    句四
</p>
<p>
    句五<br>
    句六<br>
    句七><br>
    句八
</p>

小文

马黑黑 发表于 2023-6-28 13:34
文本有几个段落，就用多少个 文本，每一个...占一行。

像诗歌，有分行和段落的约定，比如两个段落的诗 ...

深表感谢，回头我自己学习试试

马黑黑

小文 发表于 2023-6-28 13:35
我看上那个紫罗兰的框，但楼上这个框中动着的图像我不想要，就想要个框。

一、把 53 行及后面删掉；
二、把 25行删掉；
三、把 29 到 39 行删掉；

马黑黑

小文 发表于 2023-6-28 13:39
深表感谢，回头我自己学习试试

代码一点都不会的话，需要慢慢摸索

红影

这个也漂亮，简单而实用。师兄快来看@樵歌  

红影

马黑黑 发表于 2023-6-28 13:36
5楼，文本的代码也可以写成这样，方便修改文本内容：

有道理，这样写看着更清楚

南无月

会嚎歌的小可爱又来了。。。来点点它，看看今天有木有变成另外一只小熊

马黑黑

红影 发表于 2023-6-28 15:49
这个也漂亮，简单而实用。师兄快来看@樵歌

马黑黑

南无月 发表于 2023-6-28 17:36
会嚎歌的小可爱又来了。。。来点点它，看看今天有木有变成另外一只小熊

今天不变了

马黑黑

醉美水芙蓉 发表于 2023-6-28 17:17
这个配色也挺漂亮的！

还行的吧

马黑黑

红影 发表于 2023-6-28 15:55
有道理，这样写看着更清楚

战行数多一点，但方便

千羽

喜欢这样精致纤巧的小小播放器，小熊宝宝也挺可爱的

千羽

樵歌老师快来开心收礼