四月有雨TO---清寒
本帖最后由 大猫咪 于 2022-4-1 21:56 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1100px; height: 600px; background:#333 url('https://s3.bmp.ovh/imgs/2022/04/01/3a5e4ec22ec8c356.gif') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #EEEE00;
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: 120px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif') no-repeat;
cursor: pointer;
}
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:120px; top: 40px; ">四月有雨</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
<div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
<marqueescrollamount="5" direction="left" > </marquee>
</div>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:120px; left: 10px; 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=29802293.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/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script> 俺说咋等不到声音了，原因上面给关了{:5_117:} 这雨下得真大啊，象雷雨了猫太会整图了{:4_204:} 本帖最后由 大猫咪 于 2022-4-20 20:59 编辑
绿叶清舟 发表于 2022-4-1 21:57
俺说咋等不到声音了，原因上面给关了
现在能听到不清舟{:5_106:}感觉有那不合适不{:4_191:}
我就看到了动图和按钮，音乐真好
屏幕一片黑{:4_203:} 大猫咪 发表于 2022-4-1 21:58
现在能听到不清舟 感觉有那不合适不
能听到，在打雷了或者给特效加点透明度，淡些，象水星飞舞？ 千羽 发表于 2022-4-1 22:01
我就看到了动图和按钮，音乐真好
屏幕一片黑
啊千羽， 猫这挺快的，是不是出问题了 {:5_102:}{:4_204:} 绿叶清舟 发表于 2022-4-1 22:02
能听到，在打雷了或者给特效加点透明度，淡些，象水星飞舞？
哈哈 是不是高难度吧 ，猫不会 {:5_106:} 大猫咪 发表于 2022-4-1 22:02
啊千羽， 猫这挺快的，是不是出问题了
我换个浏览器{:4_181:} 还是黑的
还是黑的，估计是我电脑的缘故{:4_181:}
千羽 发表于 2022-4-1 22:06
还是黑的
清舟可以看见啊，是不是千羽电脑的问题{:4_204:} 大猫咪 发表于 2022-4-1 22:07
清舟可以看见啊，是不是千羽电脑的问题
估计是{:4_181:} 现在能看到了： 好美的雨中乡景，猫咪好会选图{:4_187:} 千羽 发表于 2022-4-1 22:06
还是黑的
羽儿多等一会就看到了，因为图图比较大，所以加载慢。很漂亮的图图呢{:4_187:} 好大的雨啊，音乐也好听。猫猫的这个帖子做得太美了{:4_187:} 红影 发表于 2022-4-1 22:14
羽儿多等一会就看到了，因为图图比较大，所以加载慢。很漂亮的图图呢
嗯，现在就看到了{:4_185:} 红影 发表于 2022-4-1 22:14
好大的雨啊，音乐也好听。猫猫的这个帖子做得太美了
谢谢红影支持鼓励 {:4_204:}猫继续努力{:5_106:} 本帖最后由 绿叶清舟 于 2022-4-1 22:19 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1100px; height: 600px; background:#333 url('https://s3.bmp.ovh/imgs/2022/04/01/3a5e4ec22ec8c356.gif') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;}
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
margin: auto;
width: 360px;
text-align: center;
font-size: 2rem;
font-weight: bold;
color: #EEEE00;
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: 120px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif') no-repeat;
cursor: pointer;
}
</style>
<div id="xq" >
<div id="baiBox" style="position: absolute; left:120px; top: 40px; ">四月有雨</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;opacity:0.2;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
<div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
<marqueescrollamount="5" direction="left" > </marquee>
</div>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></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/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script> 这音乐居然还有雷声呢，真应景{:4_173:} <div id="baiBox" style="position: absolute; left:120px; top: 40px; ">四月有雨</div>
<div style="position: absolute; left:120px; top: 150px; width:400px;opacity:0.2;text-align:center;">
<img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
加了红色的那个，数字可以改
页:
[1]
2