Yesterday - Kenny G TO---老黑 - 音乐沙龙 - 花潮论坛

大猫咪 发表于 2022-3-15 19:40

Yesterday - Kenny G TO---老黑

本帖最后由大猫咪于 2022-3-15 20:40 编辑 <br /><br /><style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-204px; top:120px; width: 1000px; height: 700px; background:#333 url('https://s3.bmp.ovh/imgs/2022/03/e2bbe25820dad8a9.png') 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: 5rem;
   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" >披头士名曲 Yesterday 昨日 Kenny G 演绎永恒经典 </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=18940434.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>

大猫咪 发表于 2022-3-15 19:40

本帖最后由大猫咪于 2022-3-15 19:42 编辑

@马黑黑小辣椒

大猫咪 发表于 2022-3-15 19:42

谢谢老黑黑代码分享，谢谢辣椒教导{:4_189:}学习制作一个

浅风儿 发表于 2022-3-15 19:43

欣赏好曲子~

大猫咪 发表于 2022-3-15 19:44

浅风儿发表于 2022-3-15 19:43
欣赏好曲子~
浅风晚上好 {:4_187:}好久不见，谢谢支持鼓励 {:4_187:}一起学习做帖啊{:4_190:}

浅风儿 发表于 2022-3-15 19:58

大猫咪发表于 2022-3-15 19:44
浅风晚上好好久不见，谢谢支持鼓励一起学习做帖啊

我只学简单音乐代码。{:4_173:}

大猫咪 发表于 2022-3-15 20:07

浅风儿发表于 2022-3-15 19:58
我只学简单音乐代码。

哈哈也简单的改下图片，音乐和文字，一套就可以了{:4_187:} 有空学习玩玩 {:5_106:}

浅风儿 发表于 2022-3-15 20:08

大猫咪发表于 2022-3-15 20:07
哈哈也简单的改下图片，音乐和文字，一套就可以了有空学习玩玩

可我看不到代码。{:4_197:}

大猫咪 发表于 2022-3-15 20:09

绿叶清舟 发表于 2022-3-15 20:20

https://www.huachaowang.com/data/attachment/forum/202203/15/201924gajgggtt8sznc2u5.gif

绿叶清舟 发表于 2022-3-15 20:21

猫试试上面一个动画

绿叶清舟 发表于 2022-3-15 20:22

这个片片很漂亮啊{:4_204:}越来越厉害了啊

大猫咪 发表于 2022-3-15 20:24

绿叶清舟发表于 2022-3-15 20:22
这个片片很漂亮啊越来越厉害了啊

感觉不满意 {:5_117:}那动画是按钮吧好的

大猫咪 发表于 2022-3-15 20:26

绿叶清舟发表于 2022-3-15 20:21
猫试试上面一个动画

代码那行啊清舟

绿叶清舟 发表于 2022-3-15 20:26

大猫咪发表于 2022-3-15 20:24
感觉不满意那动画是按钮吧好的

是按钮的，就是没扣好可以换了，注意一下尺寸变化

马黑黑 发表于 2022-3-15 20:28

昨天

大猫咪 发表于 2022-3-15 20:29

马黑黑发表于 2022-3-15 20:28
昨天

嗯嗯那个黄字太大没用{:5_106:}

马黑黑 发表于 2022-3-15 20:31

大猫咪发表于 2022-3-15 20:29
嗯嗯那个黄字太大没用

懂得用黄那是上档次的

绿叶清舟 发表于 2022-3-15 20:38

大猫咪发表于 2022-3-15 20:26
代码那行啊清舟

https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif 把这个图片全换成上面那个

大猫咪 发表于 2022-3-15 20:41

绿叶清舟发表于 2022-3-15 20:38
https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif 把这个图片全换成上面那个

哈哈好了清舟{:5_106:}{:4_179:}

页: [1] 2

花潮论坛's Archiver

Yesterday - Kenny G TO---老黑