论坛 › 马黑黑教程专版 › 另一个帖子框架（to樵歌）

马黑黑 发表于 2023-6-28 13:13

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

<style>
#mydiv {
        margin: 30px auto;
        padding: 20px 10px;
        width: 90%;
        min-height: 400px;
        border: 1px solid var(--fColor);
        color: var(--fColor);
        background: var(--bgMain);
        position: relative;
        pointer-events: none;
        --bgMain: linear-gradient(snow,lightgreen,snow);
        --bgTitle: lightgreen;
        --fColor: black;
        --btnWidth: 40px;
        --state: paused;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::before {
        padding: 0 20px;
        content: '帖子标题';
        left: 15px;
        top: -18px;
        font: bold 24px / 36px sans-serif;
        text-shadow: 1px 1px 2px #111;
        border: inherit;
        background: var(--bgTitle);
}
#mydiv::after {
        width: var(--btnWidth);
        height: var(--btnWidth);
        background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
        border-radius: 50%;
        bottom: calc(var(--btnWidth) / -2);
        left: calc(50% - var(--btnWidth) / 2);
        cursor: pointer;
        pointer-events: auto;
        animation: rot 5s infinite linear var(--state);
}
#mydiv p { padding: 10px 0; font-size: 16px; }
.txtRight { position: absolute; text-align: center; right: 10px; bottom: -10px; }
.txtMid { text-align: center; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <p>段落一</p>
        <p class="txtMid"><img src="https://638183.freep.cn/638183/2-0.gif" alt="" /></p>
        <p>段落二</p>
        <p class="txtRight">资料/网络<br>2023年6月27日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" 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>

马黑黑 发表于 2023-6-28 13:14

代码
<style>
#mydiv {
        margin: 30px auto;
        padding: 20px 10px;
        width: 90%;
        min-height: 400px;
        border: 1px solid var(--fColor);
        color: var(--fColor);
        background: var(--bgMain);
        position: relative;
        pointer-events: none;
        --bgMain: linear-gradient(snow,lightgreen,snow);
        --bgTitle: lightgreen;
        --fColor: black;
        --btnWidth: 40px;
        --state: paused;
}
#mydiv::before, #mydiv::after { position: absolute; content: ''; }
#mydiv::before {
        padding: 0 20px;
        content: '帖子标题';
        left: 15px;
        top: -18px;
        font: bold 24px / 36px sans-serif;
        text-shadow: 1px 1px 2px #111;
        border: inherit;
        background: var(--bgTitle);
}
#mydiv::after {
        width: var(--btnWidth);
        height: var(--btnWidth);
        background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
        border-radius: 50%;
        bottom: calc(var(--btnWidth) / -2);
        left: calc(50% - var(--btnWidth) / 2);
        cursor: pointer;
        pointer-events: auto;
        animation: rot 5s infinite linear var(--state);
}
#mydiv p { padding: 10px 0; font-size: 16px; }
.txtRight { position: absolute; text-align: center; right: 10px; bottom: -10px; }
.txtMid { text-align: center; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <p>段落一</p>
        <p class="txtMid"><img src="https://638183.freep.cn/638183/2-0.gif" alt="" /></p>
        <p>段落二</p>
        <p class="txtRight">资料/网络<br>2023年6月27日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=501214980" 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>

马黑黑 发表于 2023-6-28 13:16

颜色及其他相关配置：

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

小文 发表于 2023-6-28 13:20

先收藏下来备用，谢谢先生！{:4_187:}

马黑黑 发表于 2023-6-28 13:34

本帖最后由 马黑黑 于 2023-6-28 13:37 编辑

小文 发表于 2023-6-28 13:20
先收藏下来备用，谢谢先生！
文本有几个段落，就用多少个 <p>文本</p>，每一个<p>...</p>占一行。

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

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

小文 发表于 2023-6-28 13:35

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

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


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

马黑黑 发表于 2023-6-28 13:36

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

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

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

小文 发表于 2023-6-28 13:39

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

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

深表感谢，回头我自己学习试试{:4_204:}

马黑黑 发表于 2023-6-28 13:39

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

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

马黑黑 发表于 2023-6-28 13:40

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

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

红影 发表于 2023-6-28 15:49

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

红影 发表于 2023-6-28 15:55

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




有道理，这样写看着更清楚{:4_199:}

醉美水芙蓉 发表于 2023-6-28 17:17

南无月 发表于 2023-6-28 17:36

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

马黑黑 发表于 2023-6-28 18:22

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

{:4_191:}

马黑黑 发表于 2023-6-28 18:22

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

今天不变了

马黑黑 发表于 2023-6-28 18:22

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

还行的吧

马黑黑 发表于 2023-6-28 18:23

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

战行数多一点，但方便

千羽 发表于 2023-6-28 20:25

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

千羽 发表于 2023-6-28 20:25

樵歌老师快来开心收礼{:4_199:}

查看完整版本: 另一个帖子框架（to樵歌）