绿叶清舟 发表于 2022-3-11 21:01

西楼别序TO友昕

本帖最后由 绿叶清舟 于 2023-2-17 19:53 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/622b45f75baa1a80ab09c639.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:580px; width:200px;TOP: -140px">
<IMG border=0 src="https://pic.imgdb.cn/item/622b46ee5baa1a80ab0a99ba.gif"width=300_height="100"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="http://music.163.com/song/media/outer/url?id=1811662859.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

大猫咪 发表于 2022-3-11 21:35

清舟这制作真棒 ！赞~~~~

想起一句话：一川云水,一朵彼岸,流年于指尖的散落,一影碎念,一场风花,浅吟低唱成曲.。。。

友昕收礼开心！

{:4_204:}{:4_199:}

绿叶清舟 发表于 2022-3-11 21:38

大猫咪 发表于 2022-3-11 21:35
清舟这制作真棒 ！赞~~~~

想起一句话：一川云水,一朵彼岸,流年于指尖的散落,一影碎念,一场风花,浅吟低 ...

谢谢猫，叫他老是躲着不出来{:4_189:}

千羽 发表于 2022-3-11 21:40

素雅的画面意境深深，清舟的图棒棒哒{:4_187:}

大猫咪 发表于 2022-3-11 21:44

绿叶清舟 发表于 2022-3-11 21:38
谢谢猫，叫他老是躲着不出来

这孩子是个安静的人 {:4_170:}

小辣椒 发表于 2022-3-11 21:46

清舟又古韵帖一个{:4_199:}

绿叶清舟 发表于 2022-3-11 21:47

千羽 发表于 2022-3-11 21:40
素雅的画面意境深深，清舟的图棒棒哒

谢谢千羽，晚上好

绿叶清舟 发表于 2022-3-11 21:47

大猫咪 发表于 2022-3-11 21:44
这孩子是个安静的人

是不是地主家的都这样啊{:4_189:}

小辣椒 发表于 2022-3-11 21:48

一个图，一个小动图，一个播放器，简洁，音乐也是清幽，非常棒的效果{:4_178:}

大猫咪 发表于 2022-3-11 21:48

绿叶清舟 发表于 2022-3-11 21:47
是不是地主家的都这样啊
嗯嗯   必须养的胖胖的，才可爱{:4_170:}

小辣椒 发表于 2022-3-11 21:48

友昕收礼开心{:4_187:}

千羽 发表于 2022-3-11 21:48

绿叶清舟 发表于 2022-3-11 21:47
谢谢千羽，晚上好

清舟不客气哈{:4_173:}

绿叶清舟 发表于 2022-3-11 21:50

大猫咪 发表于 2022-3-11 21:48
嗯嗯   必须养的胖胖的，才可爱

这么静养着肉会长得很多很多的啊{:4_189:}

绿叶清舟 发表于 2022-3-11 21:50

千羽 发表于 2022-3-11 21:48
清舟不客气哈

嗯，咱们不用客气的啊{:4_173:}

绿叶清舟 发表于 2022-3-11 21:51

小辣椒 发表于 2022-3-11 21:48
一个图，一个小动图，一个播放器，简洁，音乐也是清幽，非常棒的效果

谢谢辣椒晚上好

大猫咪 发表于 2022-3-11 21:52

绿叶清舟 发表于 2022-3-11 21:50
这么静养着肉会长得很多很多的啊

直接升级成财主家娃{:4_170:}

小辣椒 发表于 2022-3-11 21:53

绿叶清舟 发表于 2022-3-11 21:51
谢谢辣椒晚上好

清舟太客气了

绿叶清舟 发表于 2022-3-11 21:59

大猫咪 发表于 2022-3-11 21:52
直接升级成财主家娃

该动动啦，再不动得抬着升级了{:4_189:}

大猫咪 发表于 2022-3-11 21:59

绿叶清舟 发表于 2022-3-11 21:59
该动动啦，再不动得抬着升级了

{:4_170:}就是，

友昕 发表于 2022-3-11 22:14

清舟的制图越发精美了！
感谢！
顺便猜个谜：风中斜燕过西楼（字）
页: [1] 2 3
查看完整版本: 西楼别序TO友昕