茶亦醉人何必酒，东篱喝茶无须花~~~
<br /><br /><style type="text/css">#xq/* 父框盒子 */
{ position: relative;width: 770px; height:790px; background-image: url('https://pic.imgdb.cn/item/624abd79239250f7c55012c8.jpg'); box-shadow: 4px 4px 5px #888; background-size: 770px 790px; border-radius:12px; background-position: 770px 0; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
/* 动画 */
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放器按钮 */
.picBtn {
width: 60px;
height: 80px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202202/17/163610o7gswbooebvgocbo.gif') no-repeat;
cursor: pointer;
}
/* 轱辘诗 */
.hxBox { position: absolute; left:230px; top:320px; width: 180px; height: 150px; font-family: '楷体','微软雅黑'; font-size: 24px;transform-origin: 50 50; animation: go 24s linear infinite;}
@keyframes go { to { transform: rotate(-360deg);} }
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:310px; top:280px; "><div class="spiBox">
<img src="https://www.huachaowang.com/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
</div>
<div class="hxBox">
<svg viewBox="0 0 100 100">
<path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
<text stroke="#ff3300">
<textPath xlink:href="#yuan">
</textPath>
</text>
</svg>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:50px; left: -230px; top:380px;calc(100% 200px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=453547239.mp3" ></audio>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202202/17/163610o7gswbooebvgocbo.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202202/17/163610o7gswbooebvgocbo.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202202/17/163610o7gswbooebvgocbo.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 1000px;
height: 80px;
left:420px;
top:-380px;
color:#FF4500;
line-height: 20px;
font-size: 15px;
animation: mq linear 30s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
</style>
<br><br><br><br><br>
端起杯来，有轮旭日，有弯新月，有满天的星星……噢哦~有黑珍珠，，浸泡在茶里呢！抿一口，咂咂嘴儿，满口的太阳味儿、月亮味儿、星星味儿、黑黑牌蜘蛛味儿！@东篱闲人 这茶不能把喝吧。。。{:4_189:} 东篱喝了这个可以长生不老{:4_189:} 听说你对黑黑用”不友好态度“请他喝茶……{:4_174:}
今将军府请客品茶赏花开，莫嫌舍寒陋宅，{:4_197:}门庭迎尔随时来。。喝出西湖龙井香，茶中自有（黑）珍珠在。{:4_170:} 加林森 发表于 2022-4-4 18:31
这茶不能把喝吧。。。
水温够了茶自香 马黑黑 发表于 2022-4-4 18:31
东篱喝了这个可以长生不老
如兰在舌，沁人心脾，芬芳甘冽，清香怡人。。@东篱闲人不用咳气，一杯不够，，够喝一壶。 安宁 发表于 2022-4-4 18:33
水温够了茶自香
{:4_181:} 安宁 发表于 2022-4-4 18:36
如兰在舌，沁人心脾，芬芳甘冽，清香怡人。。@东篱闲人不用咳气，一杯不够，，够喝一壶。
这回将军好大方，把我的蜘蛛给虐了，还送了东篱人情{:4_170:} 安宁 发表于 2022-4-4 18:25
端起杯来，有轮旭日，有弯新月，有满天的星星……噢哦~有黑珍珠，，浸泡在茶里呢！抿一口，咂咂嘴儿，满口 ...
你这丫头是和俺杠上了，是吧？{:4_170:} 这是名贵中药啊这是。。。{:5_117:} 马黑黑 发表于 2022-4-4 18:31
东篱喝了这个可以长生不老
听说疗效不错，来一杯？这个不甜。。。{:4_190:} 安宁 发表于 2022-4-4 18:36
如兰在舌，沁人心脾，芬芳甘冽，清香怡人。。@东篱闲人不用咳气，一杯不够，，够喝一壶。
嗯嗯，真够喝一壶的。。。。{:4_170:} 这制作真棒，小安宁学习的好快{:5_106:}哈哈 老头喝了武功一定大增啊{:4_170:} 马黑黑 发表于 2022-4-4 18:55
这回将军好大方，把我的蜘蛛给虐了，还送了东篱人情
你要个人情不？{:5_117:} 东篱闲人 发表于 2022-4-4 19:39
你要个人情不？
人情与我无关哈 东篱闲人 发表于 2022-4-4 19:37
听说疗效不错，来一杯？这个不甜。。。
我不喝蜘蛛茶{:4_189:}谢了你自用 马黑黑 发表于 2022-4-4 18:55
这回将军好大方，把我的蜘蛛给虐了，还送了东篱人情
充分发挥先锋模范作用，黑珍珠表示乐见其成。
{:4_173:}别心疼了，我也没安排它上战场冲锋去 马黑黑 发表于 2022-4-4 20:03
我不喝蜘蛛茶谢了你自用
总这么客气不好，见外了。。。{:5_117:} 东篱闲人 发表于 2022-4-4 19:36
你这丫头是和俺杠上了，是吧？
来了哈，小竹篱先把茶喝了……咳，听歌~
某爷：“花钱喝茶，难道还叫谁管着嘛?”
某某爷：“我说这位爷，您是营里当差的吧？来来来来 坐下喝碗儿，我们也都是外场人儿。”
某爷：“我说你冲谁拽列子呢？”