多少楼台烟雨中
本帖最后由 东篱闲人 于 2022-6-26 12:44 编辑 <br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-650px; top:120px; width: 2400px; height:800px; background-image: url('https://s1.ax1x.com/2022/06/26/jAF2gP.jpg'); box-shadow: 4px 4px 5px #888; background-size: 2400px 800px; border-radius:12px; background-position: 1200px 0;animation: mv 28s linear infinite; }
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
/* 摇摆字 */
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 400px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color:#DF7401;
transform-origin: top;
animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
/* 轱辘诗 */
.hxBox { position: absolute; left:220px; top:150px; width: 160px; 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:750px; top: 45px; ">◇◇◇烟雨草堂作品◇◇◇</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="#B40431">
<textPath xlink:href="#yuan">
</textPath>
</text>
</svg>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:50px; left: 600px; top:calc(100% - 140px); 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=1447823539.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('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-02/24/16/20220224160408591-5087368.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 1800px;
height: 100px;
left:-50px;
top:-50px;
color:#DF7401;
line-height: 40px;
font-size: 15px;
animation: mq linear 10s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
</style>
<div class="mvBox">漫步江南,多少楼台烟雨中 江南,有着似水的柔情,有着女子的婉约,有着茉莉一般淡淡的 芳韵。红豆生南国,何处惹相思?</div>
<br><br><br><br><br><br><br><br>
震撼啊，太棒了 绿叶清舟 发表于 2022-6-26 11:06
震撼啊，太棒了
谢谢师傅！{:4_204:} 南朝四百八十爱{:4_170:} 马黑黑 发表于 2022-6-26 12:50
南朝四百八十爱
黑黑是爱神！{:5_116:} 东篱闲人 发表于 2022-6-26 12:53
黑黑是爱神！
说的是你哈{:4_170:} 马黑黑 发表于 2022-6-26 13:12
说的是你哈
俺不行，俺淳朴。。。{:5_116:} 东篱闲人 发表于 2022-6-26 13:45
俺不行，俺淳朴。。。
淳朴跟这个木有矛盾 这长幅图画真没，多少烟雨，几度春秋。欣赏东篱大哥好制作{:4_187:} 美不胜收的制作，出类拔萃的作品。 东篱闲人 发表于 2022-6-26 12:43
谢谢师傅！
这么客气 马黑黑 发表于 2022-6-26 15:02
淳朴跟这个木有矛盾
淳朴的人都木讷，俺就是。。。{:5_103:} 醉美水芙蓉 发表于 2022-6-26 15:10
欣赏东篱老师长卷音画！哇瑟！还是移动长卷音画！
都是黑黑的代码威风。。。 红影 发表于 2022-6-26 15:48
这长幅图画真没，多少烟雨，几度春秋。欣赏东篱大哥好制作
春秋几度，岁月如烟。。。{:5_103:} 梦油 发表于 2022-6-26 16:44
美不胜收的制作，出类拔萃的作品。
谢谢老梦，没那么严重。。。{:5_117:} 绿叶清舟 发表于 2022-6-26 17:38
这么客气
对师傅不客气，那好吗？{:5_117:} 东篱闲人 发表于 2022-6-26 18:35
淳朴的人都木讷，俺就是。。。
木讷有木讷的福气，至少可以拥有后宫 马黑黑 发表于 2022-6-26 19:08
木讷有木讷的福气，至少可以拥有后宫
没了，打包处理了。。。{:5_103:} 东篱闲人 发表于 2022-6-26 18:38
对师傅不客气，那好吗？
没啥不好的{:4_189:}