红尘客栈 TO猫猫
本帖最后由 东篱闲人 于 2022-3-24 15:31 编辑 <br /><br /><style type="text/css">/* 父框盒子 */
#xq { position: relative; left:-330px; top:120px; width: 1200px; height:708px; background-image: url('https://s1.ax1x.com/2022/03/24/qG0Z28.jpg'); box-shadow: 4px 4px 5px #888; background-size: 1400px 708px; 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: 2.9rem;
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('https://s1.ax1x.com/2022/03/24/qGwYBd.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:410px; top: 320px; ">红尘客栈</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% - 120px); 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=1416232916.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://s1.ax1x.com/2022/03/24/qGwYBd.gif')") : (mu.pause(), btn.style.background="url('https://s1.ax1x.com/2022/03/24/qGwYBd.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://s1.ax1x.com/2022/03/24/qGwYBd.gif')";
});
</script>
<style>
.mvBox {
position: relative;
width: 1000px;
height: 100px;
left:150px;
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_187:}红尘，让人无限留恋，岁月匆匆，真情怎奈无情伤，即是镜花水月终究一场空
让人感慨万千！谢谢老头美帖！真棒！
{:4_204:}{:4_199:} 老兄玩上瘾了，融合的图图真漂亮，还把歌王搬来唱歌，厉害啊。{:4_199:} 东篱大哥果然做了上下边框，看起来真的像只有中间位置的图图在滚动一样，有趣，真漂亮{:4_187:} 红尘客栈里记得都是武功高手，东篱大哥送这个给猫猫，意思猫猫也是武功高手呗{:4_173:} 凝眸，刹那，一生，开不完春柳春花满画楼。睡不稳纱窗风雨黄昏后，真情难填埋无情洞，都是一场梦。。
{:4_204:}
谢谢老头！挂着欣赏，呼呼了，大家晚安 {:4_204:} 图图意境和词同境还有那画中人全一个鼻孔出气哈。{:4_199:} 估计猫昨夜失眠了{:4_189:} 大猫咪 发表于 2022-3-23 21:29
太喜欢这制作了老头 红尘，让人无限留恋，岁月匆匆，真情怎奈无情伤，即是镜花水月终究一场空
...
喜欢啊？那俺就放心了。。。{:5_117:} 加林森 发表于 2022-3-23 21:35
老兄玩上瘾了，融合的图图真漂亮，还把歌王搬来唱歌，厉害啊。
没啥玩的，没办法。。。{:5_117:} 红影 发表于 2022-3-23 21:41
红尘客栈里记得都是武功高手，东篱大哥送这个给猫猫，意思猫猫也是武功高手呗
防身。。。。{:5_117:} 大猫咪 发表于 2022-3-23 21:41
凝眸，刹那，一生，开不完春柳春花满画楼。睡不稳纱窗风雨黄昏后，真情难填埋无情洞，都是一场梦。。
{: ...
嗯嗯，都是一场梦。。{:5_117:} 大猫咪 发表于 2022-3-23 23:29
谢谢老头！挂着欣赏，呼呼了，大家晚安
不许客气！ 樵歌 发表于 2022-3-24 07:46
估计猫昨夜失眠了
有这疗效吗？{:5_115:} 东篱闲人 发表于 2022-3-24 15:36
没啥玩的，没办法。。。
挺好的。。。。{:4_199:} 加林森 发表于 2022-3-24 16:53
挺好的。。。。
马马虎虎。。。{:5_117:} 东篱闲人 发表于 2022-3-24 17:52
马马虎虎。。。
老兄又换播放器了啊。。。。。{:5_117:} 加林森 发表于 2022-3-24 17:57
老兄又换播放器了啊。。。。。
随便研究研究。。。{:5_117:} 东篱闲人 发表于 2022-3-24 18:08
随便研究研究。。。
厉害厉害，小弟佩服。。。。{:5_116:}
页:
[1]
2