作画 TO朝云暮雨
<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: '作画TO朝云暮雨';
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"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
<pclass="txtMid">我一起笔就意在意存，等待 <br>
<pclass="txtMid">一个倾慕的女子，耽心</p>
<pclass="txtMid">你在云中隐逸</p>
<pclass="txtMid">于是用中锋演成一架梯子</p>
<pclass="txtMid">去星光中寻觅</p></p>
<p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
<pclass="txtMid">我的线条是遒劲的</p>
<pclass="txtMid">构架圆润厚实</p>
<pclass="txtMid">从大地开始行笔</p>
<pclass="txtMid">几经朝云暮雨</p>
<pclass="txtMid">直到月亮上方才顿笔</p>
<pclass="txtMid">哪怕是一场虚拟的盛会</p>
<pclass="txtMid">也怕</p>
<pclass="txtMid">你在云中失足</p></p>
<p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
<pclass="txtMid">其实，前一世我就预谋</p>
<pclass="txtMid">这一世一生，你都注定</p>
<pclass="txtMid">要进入我写意的山水</p>
<pclass="txtMid">我将工笔彩绘，只为你</p>
<pclass="txtMid">筑一座天空之城</p>
<p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></p>
<pclass="txtMid">城中，有白月光和琴声</p>
<pclass="txtMid">把一曲一曲的相思，从春天送往春天</p>
<pclass="txtMid">在繁花缀连的小径上</p>
<pclass="txtMid">扣手，对视</p>
<pclass="txtMid">隐去黑夜</p>
<pclass="txtMid">从白天进入，到达白天</p></p>
<p class="txtMid"><img src="https://pic.imgdb.cn/item/649ebd021ddac507cca5972c.png" alt="" /></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年7月3日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5255681.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>
附附：
做你词里的人
丨朝云暮雨
因有灵犀，我携一笔走向
入了你写意中的山水
靠过去，满心欢喜
入画成画，成了
你画中的词里人
停顿或跌宕都要跟上步骤
我虚拟了一个交会的良辰，你
裁了一墙共享的花光
蔷薇明媚烂漫的开着，从相思的黑夜
铺到白天
那满纸浪漫的背景墙上，时光月光和星光
侧身退去
一个手伸出来，扣紧了另一个
默然的对视，万千风景
你看到的，也是我看到的
比如
一汪秋水微澜的波动下，映着另一潭深湛清澈的涟漪
比如你掌心的懂得握住了温柔的交付
有虫声在叶子底下窃窃私语，说
有不可言破的秘密
说笔触要放轻，放慢
说清欢的续盏
说低头的轻言笑
不落俗
@朝云暮雨 @马黑黑 ，弄了好久终于把你送的代码给用上了{:4_176:} @马黑黑 不知道把左对齐调到居中一点？{:4_190:} 这个音乐转盘没动，音乐也听不到，奇怪了{:4_203:} 樵歌 发表于 2023-7-3 12:51
附附：
做你词里的人
丨朝云暮雨
这首好像坛子里没看到啊，是私下写给师兄的么{:4_173:} 师兄用诗句筑一座天空之城，好美。给师兄点赞{:4_199:} 代码中，文本可以这么组织：
<p>
我一起笔就意在意存，等待<br>
一个倾慕的女子，耽心<br>
你在云中隐逸<br>
于是用中锋演成一架梯子<br>
去星光中寻觅<br><br>
我的线条是遒劲的<br>
构架圆润厚实<br>
从大地开始行笔<br>
几经朝云暮雨<br>
直达月亮上方才顿笔<br>
哪怕是一场虚拟的盛会<br>
也怕<br>
你在云中失足<br><br>
其实，前一世我就预谋<br>
这一世一生，你都注定<br>
要进入我写意的山水<br>
我将工笔彩绘，只为你<br>
筑一座天空之城<br><br>
城中，有白月光和琴声<br>
把一曲一曲的相思，从春天送往春天<br>
在繁花缀连的小径上<br>
扣手，对视<br>
隐去黑夜<br>
从白天进入，到达白天
</p>
只要一个 p 标签，其余各行末尾用 <br>，分段的用 <br><br> 红影 发表于 2023-7-3 13:03
这个音乐转盘没动，音乐也听不到，奇怪了
我又换成师妹步韵一斛珠的那代码了，怎么还是不居中呀？{:4_203:} 文本还可以这样组织：
<p>
我一起笔就意在意存，等待<br>
一个倾慕的女子，耽心<br>
你在云中隐逸<br>
于是用中锋演成一架梯子<br>
去星光中寻觅
</p>
<p>
我的线条是遒劲的<br>
构架圆润厚实<br>
从大地开始行笔<br>
几经朝云暮雨<br>
直达月亮上方才顿笔<br>
哪怕是一场虚拟的盛会<br>
也怕<br>
你在云中失足
</p>
<p>
其实，前一世我就预谋<br>
这一世一生，你都注定<br>
要进入我写意的山水<br>
我将工笔彩绘，只为你<br>
筑一座天空之城
</p>
<p>
城中，有白月光和琴声<br>
把一曲一曲的相思，从春天送往春天<br>
在繁花缀连的小径上<br>
扣手，对视<br>
隐去黑夜<br>
从白天进入，到达白天
</p>
这里，每一对 <p>...</p> 标签是一段，段落里各行用 <br> 断行，也很好。 马黑黑 发表于 2023-7-3 13:10
代码中，文本可以这么组织：
我马上云检查下文档 中的原来抄的代码，对比下错在哪里了 樵歌 发表于 2023-7-3 13:16
我马上云检查下文档 中的原来抄的代码，对比下错在哪里了
组织文本的代码，我在你的帖子里提供了两种方法，你看哪一种合适就用哪一种。 红影 发表于 2023-7-3 13:04
这首好像坛子里没看到啊，是私下写给师兄的么
{:4_173:}在回帖里出现的，怕我忙没时间回。{:4_201:} 红影 发表于 2023-7-3 13:06
师兄用诗句筑一座天空之城，好美。给师兄点赞
本想续写原来的空城，但要顺着云儿的诗意来回，只好取个作画的标题吧并以这个话题展开，见笑了{:4_173:} 马黑黑 发表于 2023-7-3 13:17
组织文本的代码，我在你的帖子里提供了两种方法，你看哪一种合适就用哪一种。
不知道怎么搞的，我编好后复制再贴 时那代码序号去不掉。所以又费时换成红影加分隔条那个了。 图文并茂，入情，入心， 字字传情，句句生香，真挚自然， 耐品！ 真棒！
樵哥哥现在帖制作的漂亮！是高手了 {:5_106:}问好！
{:4_204:}{:4_179:}
欣赏师叔大作,敬茶先{:4_180:} 欣赏佳作，问候樵歌。 大猫咪 发表于 2023-7-3 14:08
图文并茂，入情，入心， 字字传情，句句生香，真挚自然， 耐品！ 真棒！
樵哥哥现在帖制作的漂亮！ ...
文字肯定是谬赞了{:4_203:}制作在黑师的教导和红影的指点下免强抄出来了{:4_173:}