春共山中采 香宜竹里煎
<br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-330px; top:120px; width: 1200px; height:1110px; background-image:url('https://pic.imgdb.cn/item/6247cbe327f86abb2a2a3459.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1400px 1110px; border-radius:12px; background-position: 1200px 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: 120px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/6247cdd827f86abb2a2ddab0.gif') no-repeat;
cursor: pointer;
}
/* 轱辘诗 */
.hxBox { position: absolute; left:220px; top:260px; width: 180px; height: 160px; 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:950px; top:120px; ">半榻梦刚回<br><br>活火初煎新涧水<br><br>一帘春欲暮<br><br>茶烟细飏落花风</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: 980px; top:calc(100% - 280px); 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=1840464673.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://pic.imgdb.cn/item/6247cdd827f86abb2a2ddab0.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/6247cdd827f86abb2a2ddab0.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/6247cdd827f86abb2a2ddab0.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 1200px;
height: 100px;
left:320px;
top:-500px;
color:#FF4500;
line-height: 18px;
font-size: 18px;
animation: mq linear 30s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
</style>
<br><br><br><br><br><br><br><br><br><br>
<style type="text/css">
.mBox {
margin: 10px auto;
width: 1200px;
height: 600px;
position: relative;
left: -304px;
top: 80px;
overflow: hidden;
border: 1px solid navy;
box-shadow: 2px 2px 4px 1px #444;
position: relative;
}
.pBox {
position: absolute;
animation: Roll 45s linear infinite;
display: flex;
}
.pBox:hover {
cursor: pointer;
animation-play-state: paused;
}
.pBox img {
width: 1200px;
height:600px;
float: left;
}
@keyframes Roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
</style>
<div class="mBox">
<div id="pBox" class="pBox">
<img alt="" src="https://pic.imgdb.cn/item/62480e8c27f86abb2ab2ea1e.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/62491de627f86abb2a776908.png" />
<img alt="" src="https://pic.imgdb.cn/item/6249203127f86abb2a7bbba5.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248193427f86abb2ac911af.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248625727f86abb2a6fc599.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
<img alt="" src="https://pic.imgdb.cn/item/6248191f27f86abb2ac8e5c7.png" />
</div>
<FONT style="LEFT: 420px; POSITION: absolute; TOP: 100px;FONT-SIZE: 40pt; FILTER: shadow(color=#AF0530); WIDTH: 110%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书">春共山中采{:4_190:}香宜竹里煎</FONT>
<FONT style="LEFT: 430px; POSITION: absolute; TOP: 200px;FONT-SIZE: 30pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #FF6600; LINE-HEIGHT: 120%; FONT-FAMILY: 仿宋"><B>黑黑建议▪队长支持▪烤竹篱▪煮茶</B></FONT>
</div>
<audio id="ktv" src="http://mu*sic.163.com/song/media/outer/url?id=509094824.mp3" loop="loop" autoplay="autoplay"></audio>
<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){
ktv.paused ? ktv.play() : ktv.pause();
}
</script>
<br><br><br><br><br><br><br><br>
将军出手果然不一样，制作得太精美了，很漂亮！把老兄当播放器了，厉害厉害。{:4_199:} @东篱闲人快来快来。。。。。 空气潮湿，不宜烤蟹。黑黑建议煮茶喝。正巧队长说要喝下午茶。。众人削竹焙茶烟 {:4_173:}不咳气，借斗杓共酌杯，甭管小竹篱是否同意，煎了再说。{:4_170:} 安宁 发表于 2022-4-3 17:54
空气潮湿，不宜烤蟹。黑黑建议煮茶喝。正巧队长说要喝下午茶。。众人削竹焙茶烟 不咳气，借斗杓共 ...
{:4_172:}佩服佩服。。。。 加林森 发表于 2022-4-3 17:49
将军出手果然不一样，制作得太精美了，很漂亮！把老兄当播放器了，厉害厉害。
东篱是音响师 马黑黑 发表于 2022-4-3 17:59
东篱是音响师
应该是的。 加林森 发表于 2022-4-3 18:01
应该是的。
高级音响师 加林森 发表于 2022-4-3 17:49
将军出手果然不一样，制作得太精美了，很漂亮！把老兄当播放器了，厉害厉害。
消竹焙茶俺是认真滴……必须标配墙裂的个人色彩{:4_173:}
马黑黑 发表于 2022-4-3 18:03
高级音响师
应该是特级的。 加林森 发表于 2022-4-3 18:04
应该是特级的。
正是正是 马黑黑 发表于 2022-4-3 17:59
东篱是音响师
随便摁，开心戳，想停揍停，表咳气~ 马黑黑 发表于 2022-4-3 18:05
正是正是
嗯嗯 安宁 发表于 2022-4-3 18:03
消竹焙茶俺是认真滴……必须标配墙裂的个人色彩
好的好的，已经通知他了。。。。{:5_117:} 将军这是要把东篱喝掉吗{:4_189:} 这制作太棒了{:4_204:} 小安宁好棒，用了好多代码效果。这是要煎东篱茶么，真会玩{:4_173:} 加林森 发表于 2022-4-3 17:49
将军出手果然不一样，制作得太精美了，很漂亮！把老兄当播放器了，厉害厉害。
来啦。。。。。{:4_187:} 天啊，给俺整茶碗边上去啦？好危险。。。。{:5_117:}