隔壁泰山
本帖最后由 安宁 于 2022-3-30 16:46 编辑 <br /><br /><br /><br /><style type="text/css">#xq/* 父框盒子 */
{ position: relative;width: 770px; height:632px; background-image: url('https://pic.imgdb.cn/item/62427af627f86abb2a3540ae.jpg'); box-shadow: 4px 4px 5px #888; background-size: 770px 632px; 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:220px; top:330px; 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 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: 80px; top:calc(100% - 170px); 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=862101001.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 13s infinite;
}
@keyframes mq {
from { transform: translateX(200px); }
to { transform: translateX(0); }
}
</style>
<br><br><br><br><br>
星稀，月雾。雾里看花朦胧又神秘，谁是珍妮？ 安宁将军来啦，晚上好。{:4_204:}
这个制作有点意思了。我帮助你喊老兄来收礼。{:4_199:}@东篱闲人 Jeanne is a beautiful girl ？ 加林森 发表于 2022-3-29 22:04
安宁将军来啦，晚上好。
这个制作有点意思了。我帮助你喊老兄来收礼。@东篱闲人
看到图片好笑 刚听到泰山这曲子 {:4_173:} 做好图片后悔了不要JPG 应该上原来的动图 我是隔壁的泰山 / 抓住爱情的藤蔓 听我说 / 嗷~
你是美丽的珍妮 / 牵着我的手去浪迹天涯/ 嗷 ～
必须来个三连笑 {:5_106:}{:4_173:} {:4_170:}
安宁 发表于 2022-3-29 22:12
看到图片好笑 刚听到泰山这曲子 做好图片后悔了不要JPG 应该上原来的动图
没关系的，挺好玩的。 {:4_170:}那泰山太威武 加林森 发表于 2022-3-29 22:18
没关系的，挺好玩的。
用动图更好玩 小竹篱这广场舞跳得太震撼 https://s1.ax1x.com/2022/03/20/qeQEJH.gif
转转 发表于 2022-3-29 22:21
那泰山太威武
我真的觉得你这赞很有诚心与敬仰也，转转同志。{:5_117:} 安宁 发表于 2022-3-29 22:27
用动图更好玩 小竹篱这广场舞跳得太震撼
就是，好玩就行。 安宁 发表于 2022-3-29 22:30
我真的觉得你这赞很有诚心与敬仰也，转转同志。
嗯嗯，东篱老爷子会笑晕的{:4_172:} 看得笑喷，小安宁真会玩{:4_173:} Hi，Jenny 谢谢安宁姑娘，给咱整了个这么优雅的环境。。。。{:5_117:} 哥已不是当年的哥。。。。。{:4_170:} 泰山好像是个猴吧？{:5_115:} 加林森 发表于 2022-3-29 22:04
安宁将军来啦，晚上好。
这个制作有点意思了。我帮助你喊老兄来收礼。@东篱闲人
来啦来啦。。。。。。。。。。。{:4_187:} 安宁 发表于 2022-3-29 22:04
星稀，月雾。雾里看花朦胧又神秘，谁是珍妮？
是谁啊？俺想看看珍妮。。。。{:5_117:} 安宁 发表于 2022-3-29 22:27
用动图更好玩 小竹篱这广场舞跳得太震撼
这是忠字舞吗{:4_189:}
页:
[1]
2