红影 发表于 2023-6-30 21:00

重发樵歌步韵（学习黑黑文本框架）


<style>
#mydiv {
        margin: 30px auto;
        padding: 10px 10px;
        width: 84%;
        min-height: 400px;
        border-radius: 12px;
        border: 2px solid var(--fColor);
        color: var(--fColor);
        background: var(--bgMain);
        position: relative;
        --bgMain: linear-gradient(snow,Moccasin,snow);
        --bgTitle: Moccasin;
        --fColor: SaddleBrown;
        --btnWidth: 50px;
        --state: paused;
}
#mydiv::before, #mydiv::after {
        position: absolute;
        padding: 0 20px;
        font: bold 24px / 24px sans-serif;
        text-shadow: 1px 1px 1px #111;
        border: inherit;
        border-radius: inherit;
        background: var(--bgTitle);
}
#mydiv::before {
        content: '步韵一斛珠';
        left: 18px;
        top: -16px;
        font: bold 20px / 32px sans-serif;
}
#mydiv::after {
        content: attr(data-tt);
        position: absolute;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
        font-size: 14px;
        line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
        position: absolute;
        width: var(--btnWidth);
        height: var(--btnWidth);
        background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
        border-radius: 50%;
        bottom: 30px;
        left: calc(50% - var(--btnWidth) / 2);
        cursor: pointer;
        pointer-events: auto;
        animation: rot 5s infinite linear var(--state);
}
.txtRight { position: absolute; text-align: center; right: 20px; bottom: 0px; }
.txtMid { text-align: center; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv" data-tt="00:00/00:00">
<p><br></p>
        <p class="txtMid"><img src="https://pic.imgdb.cn/item/649e51d61ddac507cce1fe47.gif" alt="" /></p>
        <p class="txtMid">浣溪沙·步韵一</p>
        <p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
        <pclass="txtMid">临近端阳衔梦邀，汨罗江水涨平桥，龙舟竞渡踏飞瑶。<br>忠烈贤名昭万古，九歌天问颂离骚，至今犹记楚辞豪。</p>
        <p class="txtMid">浣溪沙·步韵二</p>
        <p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
        <pclass="txtMid">粽子香甜户外飘，雄黄洒酒镇河妖，划舟投物祭怊怊。<br>屈子衷肠千古赞，愚忠不可又今宵，留身复国斩仇腰。</p>
        <p class="txtMid">七绝·步韵一</p>
        <p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
        <pclass="txtMid">年年入夏端阳节，芦叶清香糯米融。<br>艾草菖蒲门上挂，龙舟声里祭诗翁。</p>
        <p class="txtMid">七绝·步韵二</p>
        <p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
        <pclass="txtMid">夏至端阳隔日芳，家家户户粽飘香。<br>雄黄泡酒唯堪饮，不怕蛇虫害善良。</p>
        <p class="txtMid" style="transform:rotateX(180deg);"><img src="https://pic.imgdb.cn/item/649e51d61ddac507cce1fe47.gif" alt="" /></p>
        <p><br></p><p><br></p>
        <div id="mplayer"></div>
        <p class="txtRight">作者：樵歌<br> 2023年6月22日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30413334.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
(function () {       
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2023-6-30 21:01

黑黑说想加多少图图都行，结果我加了很多分割线图图进去@马黑黑{:4_173:}
感谢黑黑的代码{:4_187:}

红影 发表于 2023-6-30 21:04

师兄的两首浣溪沙和两首七绝都没分出来，正好在这个新框架下重试一次，正好趁机学习一下。
颜色调得有些太艳了点，这个还可以重新调的，颜色黑黑都是单列的@樵歌

红影 发表于 2023-6-30 21:05

时间就用了当时的发帖时间{:4_173:}

马黑黑 发表于 2023-6-30 21:18

不错的制作

醉美水芙蓉 发表于 2023-6-30 21:22

岩新新 发表于 2023-6-30 21:39

欣赏精彩制作！

红影 发表于 2023-6-30 21:41

马黑黑 发表于 2023-6-30 21:18
不错的制作

想试着学习一下，不知道弄什么内容。就这个试一下吧。{:4_173:}

红影 发表于 2023-6-30 21:41

醉美水芙蓉 发表于 2023-6-30 21:22
欣赏学习红影漂亮的贴子！

谢谢焱鑫磊鼓励，学习一下文本框架{:4_173:}

红影 发表于 2023-6-30 21:42

岩新新 发表于 2023-6-30 21:39
欣赏精彩制作！

谢谢新新鼓励，这个只是套用代码呢{:4_173:}

小辣椒 发表于 2023-6-30 22:45

哇塞~~樵哥哥的专用模版出来了{:4_178:}

小辣椒 发表于 2023-6-30 22:47

亲爱的，好制作，漂亮极了{:4_199:}

马黑黑 发表于 2023-6-30 22:53

红影 发表于 2023-6-30 21:41
想试着学习一下，不知道弄什么内容。就这个试一下吧。

非常成功

梦油 发表于 2023-7-1 09:35

花框和背景以及底色做得极好，色彩搭配很和谐。

花飞飞 发表于 2023-7-1 11:28

十分漂亮的文字图片示范贴，贴美，字美{:4_187:}

上海朝阳 发表于 2023-7-1 11:55

清新

红影 发表于 2023-7-1 14:47

小辣椒 发表于 2023-6-30 22:45
哇塞~~樵哥哥的专用模版出来了

这个是多个作品的。他要是弄一个作品的，估计里边还得改。{:4_173:}

红影 发表于 2023-7-1 14:48

小辣椒 发表于 2023-6-30 22:47
亲爱的，好制作，漂亮极了

谢谢亲爱的。弄一个这样的，下回也知道了，怎么去把蚊子套在边框里了。主要目的还是自己学习。{:4_173:}

红影 发表于 2023-7-1 14:48

马黑黑 发表于 2023-6-30 22:53
非常成功

本来就是你的代码。要成功也是你成功啊。{:4_173:}

红影 发表于 2023-7-1 14:49

梦油 发表于 2023-7-1 09:35
花框和背景以及底色做得极好，色彩搭配很和谐。

我是跟着那些找来的分割线的色彩跑的。{:4_173:}
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 重发樵歌步韵（学习黑黑文本框架）