绿叶清舟 发表于 2022-1-17 21:57

咖啡

本帖最后由 绿叶清舟 于 2022-1-23 13:58 编辑 <br /><br /><style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 720px;
      border: none;
      border-top: 6px inset #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #666666;
}
.ctBox {
      margin: 0;
      padding: 10px;
      background: #BBBBBB;
      min-height: 300px;
      border-radius: 10px;
      box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
         width: 40px;
      height: 40px;
      line-height: 40px;
      color: #BBBBBB;
      background: transparent;
      border: 0;
      border-radius: 25%;
      box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
      font-size: 18px;
      text-align: center;
}

.picBtn:hover {
       cursor: pointer;
      box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
      color: black;
}

.picBtn:active {
      transform: scale(0.98);
      box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
      color: red;
}

</style>

<div class="mnBox">
      <div class="ctBox">
                <p><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fba4be761dd8c4841c9d19ba4ad2120a15e2f1ca31c628-8J2Mx2_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645019445&t=667b72492703650a6c001fd1eef6969b"></p>
                <h2 style="text-align:center;">咖啡-张学友</h2>
                <pre>
                作词 : 何启弘
                作曲 : 黄韵玲
               编曲 : 吴庆隆
               制作人 : 欧丁玉
               太浓了吧 否则怎会苦的说不出话
               每次都一个人在自问自答
               我们的爱到底还在吗
               已经淡了吧 多放些糖也很难有变化
               不如喝完这杯就各自回家
               别坐在对面欣赏我的挣扎
               一场失败的爱情像个笑话
               热得时候心乱如麻
               冷了以后看见自己够傻
               人怎么会如此容易无法自拔
               一场无味的爱情像个谎话
               甜的时候只相信它
               苦了以后每一句都可怕
               人怎么会如此难以了无牵挂
                </pre>
                <p><audioid="music" src="http://music.163.com/song/media/outer/url?id=5252251.mp3" type="audio/mpeg" hidden="true"></audio></p>
                <p><button id="picBtn" class="picBtn">▶</button></p>
                <p></p>
      </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('')") : (mu.pause(), btn.style.background="url(' ')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('')";
})

</script>


小九 发表于 2022-1-17 21:58

抢一个沙发

红影 发表于 2022-1-17 22:08

清舟这个也和我前面的一个一样，按钮按上去没反应{:4_173:}

红影 发表于 2022-1-17 22:09

画面很美，歌曲也好听，给清舟点赞{:4_187:}

绿叶清舟 发表于 2022-1-17 22:15

红影 发表于 2022-1-17 22:08
清舟这个也和我前面的一个一样，按钮按上去没反应

是啊，好象这个透明的还没搞明白了

红影 发表于 2022-1-17 22:30

绿叶清舟 发表于 2022-1-17 22:15
是啊，好象这个透明的还没搞明白了

这个透明学会了，做出来的更好看呢{:4_204:}

千羽 发表于 2022-1-17 23:02

这小图的画面做得{:4_187:}漂亮

千羽 发表于 2022-1-17 23:03

歌儿也好听，问好清舟{:4_187:}

绿叶清舟 发表于 2022-1-18 15:38

千羽 发表于 2022-1-17 23:03
歌儿也好听，问好清舟

谢谢千羽，下午好

绿叶清舟 发表于 2022-1-18 15:39

红影 发表于 2022-1-17 22:30
这个透明学会了，做出来的更好看呢

影能点了，但还得再改一下把按钮上面的东东给整出来

红影 发表于 2022-1-18 22:17

绿叶清舟 发表于 2022-1-18 15:39
影能点了，但还得再改一下把按钮上面的东东给整出来

嗯嗯，按钮上面的 图形不见了呢。

大猫咪 发表于 2022-1-19 20:32

听歌神的歌，来杯咖啡味道就是不一样，舒服！清舟好分享，真棒！

{:4_204:}{:4_190:}

顾-念 发表于 2022-1-20 20:59

我也来杯咖啡……

绿叶清舟 发表于 2022-1-20 21:03

顾-念 发表于 2022-1-20 20:59
我也来杯咖啡……

这么晚了还来咖啡不怕睡不着啊

顾-念 发表于 2022-1-20 21:04

绿叶清舟 发表于 2022-1-20 21:03
这么晚了还来咖啡不怕睡不着啊

哈哈，这就睡了，还睡不着啥。

绿叶清舟 发表于 2022-1-20 21:11

顾-念 发表于 2022-1-20 21:04
哈哈，这就睡了，还睡不着啥。

这么早啊

马黑黑 发表于 2022-1-21 20:18

{:4_187:}

小辣椒 发表于 2022-1-21 21:26

清舟这个播放器按钮有一个空白？

绿叶清舟 发表于 2022-1-21 21:32

小辣椒 发表于 2022-1-21 21:26
清舟这个播放器按钮有一个空白？

是啊，得鼠标移上去了才会出来，没整上去

小辣椒 发表于 2022-1-21 21:45

绿叶清舟 发表于 2022-1-21 21:32
是啊，得鼠标移上去了才会出来，没整上去

哦，这些我还没有好好学习的，过段时间再学习了，先简单的玩一下

清舟我下了，晚安！
页: [1] 2
查看完整版本: 咖啡