【昨日重现】 （音乐欣赏）
本帖最后由 加林森 于 2022-3-19 21:28 编辑 <br /><br /><style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 500px; background:#333 url('https://pic.imgdb.cn/item/6235aeed5baa1a80ab49f3eb.jpg') 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: 3rem;
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: 80px;
height: 120px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('http://image.hnol.net/c/2022-03/12/19/20220312194526771-5087368.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="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif"/>
<div style="position:absolute; width:260px; left:260px; top: 0.5px; 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://www.kumeiwp.com/sub/filestores/2022/03/19/01a13385ea71ce6bd035ce10eb4d34c7.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-03/12/19/20220312194526771-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/202203121947494281-5087368.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('http://image.hnol.net/c/2022-03/12/19/202203121947494281-5087368.gif')";
});
</script>
</script> </div></div>
<br><br><br><br><br><br><br><br><br><br> 外加的动图最好用透明的，否则像多了块膏药，影响整体图片意境呢{:4_173:} 经典曲目！{:5_116:} 这个播放器放的就特别和谐。。。{:5_116:} 红影 发表于 2022-3-19 21:15
外加的动图最好用透明的，否则像多了块膏药，影响整体图片意境呢
我在调试，现在这个是最好的了。 东篱闲人 发表于 2022-3-19 21:16
经典曲目！
是的是的 东篱闲人 发表于 2022-3-19 21:16
这个播放器放的就特别和谐。。。
谢谢老兄支持。。。。{:4_190:} 加林森 发表于 2022-3-19 21:19
我在调试，现在这个是最好的了。
嗯嗯，现在好了，蝴蝶的颜色也和背景很协调。队长真棒{:4_187:} 红影 发表于 2022-3-19 21:21
嗯嗯，现在好了，蝴蝶的颜色也和背景很协调。队长真棒
我就是在找最合适来搭配的。 队长多产呀。点赞 马黑黑 发表于 2022-3-19 21:28
队长多产呀。点赞
还有一个，明天再发出来。谢谢老黑支持。{:4_190:} 素材选的好，小姑娘好可爱，做按钮很吸眼球，{:4_187:} 千羽 发表于 2022-3-19 21:33
素材选的好，小姑娘好可爱，做按钮很吸眼球，
千羽晚上好。{:4_187:} 加林森 发表于 2022-3-19 21:34
千羽晚上好。
嗯，队长也好{:4_173:} 千羽 发表于 2022-3-19 21:38
嗯，队长也好
听说你在国外啊，小心点疫情啊，自己保护好自己才行。 加林森 发表于 2022-3-19 21:40
听说你在国外啊，小心点疫情啊，自己保护好自己才行。
哈哈，队长听谁说的啊，别相信谣言哈{:4_189:} 千羽 发表于 2022-3-19 21:50
哈哈，队长听谁说的啊，别相信谣言哈
不是就好，还是国内安全点。 加林森 发表于 2022-3-19 21:52
不是就好，还是国内安全点。
是啊，国内多好啊{:4_173:} 千羽 发表于 2022-3-19 21:57
是啊，国内多好啊
就是的 加林森 发表于 2022-3-19 21:25
我就是在找最合适来搭配的。
原来是在试效果的过程中啊，我回复得太快了，还没好就开始回复了{:4_173:}
页:
[1]
2