以我深情 许你白首 TO红芍药
本帖最后由 东篱闲人 于 2022-4-9 19:58 编辑 <br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-300px; top:120px; width: 1200px; height:966px; background-image: url('https://s1.ax1x.com/2022/03/23/q1YdaD.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1400px 966px; 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); }
}
/* 播放器按钮 */
.picBtn {
width: 100px;
height: 100px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-02/24/15/202202241559481151-5087368.gif') no-repeat;
cursor: pointer;
}
/* 轱辘诗 */
.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:450px; top: 115px; ">愿得一心人,白首不相离</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=1893293413.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: 1000px;
height: 100px;
left:0px;
top:-120px;
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>
哇，你老呼之欲出，以我深情 许你白首，真滴假滴？{:4_189:} 红芍药 发表于 2022-4-9 19:58
哇，你老呼之欲出，以我深情 许你白首，真滴假滴？
嗯嗯嗯，俺淳朴，不会掏瞎。。。{:5_117:} 这首好听，像陈瑞的声音，这音画，美了美了。。。{:4_204:}{:4_204:} 红芍药 发表于 2022-4-9 20:00
这首好听，像陈瑞的声音，这音画，美了美了。。。
不是陈瑞。 这画，这曲，这音画做的，拿啥还礼啊，俺不会音画呀，纠结。。。。。{:4_173:} 东篱闲人 发表于 2022-4-9 20:00
嗯嗯嗯，俺淳朴，不会掏瞎。。。
掏瞎是啥东西啊，是淳朴的帽子和棉袄吧？{:4_173:} 东篱闲人 发表于 2022-4-9 20:01
不是陈瑞。
那是你唱滴？{:5_115:} 红芍药 发表于 2022-4-9 20:05
掏瞎是啥东西啊，是淳朴的帽子和棉袄吧？
那不重要，主要是人淳朴，老实厚道。。。{:5_112:} 红芍药 发表于 2022-4-9 20:06
那是你唱滴？
俺会听。。。 东篱闲人 发表于 2022-4-9 20:11
那不重要，主要是人淳朴，老实厚道。。。
看你的样子就是这样的，一眸凝视远方。{:4_204:}{:4_204:} 本帖最后由 红芍药 于 2022-4-9 20:28 编辑
东篱闲人 发表于 2022-4-9 20:11
俺会听。。。
你的音乐细胞比俺还多。{:4_173:} 红芍药 发表于 2022-4-9 20:25
看你的样子就是这样的，一眸凝视远方。
嗯嗯，一直淳朴老实，从未改变，曾经被模仿，从未被超越。。。{:5_112:} 红芍药 发表于 2022-4-9 20:26
你的音乐细胞壁俺还多。
不敢不敢。。。。{:5_161:} 东篱闲人 发表于 2022-4-9 20:28
嗯嗯，一直淳朴老实，从未改变，曾经被模仿，从未被超越。。。
你看俺头上，哈哈哈哈，现在俺可以超越你袅。{:4_204:}{:4_204:} 东篱闲人 发表于 2022-4-9 20:28
不敢不敢。。。。
你选的曲子都好听，休闲的好范儿。。。{:4_187:} 老兄制作真漂亮，为你点赞！{:4_199:} 老头制作都这么唯美，典雅！ 真棒！点赞！图文音并茂， 真挚温暖， 晚上好！芍药收礼开心！
{:4_179:}{:4_204:}{:4_190:} 加林森 发表于 2022-4-9 20:43
老兄制作真漂亮，为你点赞！
都是顺手拈来~{:4_172:} 浅风儿 发表于 2022-4-9 21:32
都是顺手拈来~
那是那是，老兄出手，必定是精品。风儿晚上好，周末快乐！{:4_204:}{:4_190:}
页:
[1]
2