加林森 发表于 2022-5-23 21:56

《夜玫瑰》- 陈明

本帖最后由 加林森 于 2022-5-24 10:51 编辑 <br /><br /><style>
.wrap {
      left: -302px;top:150px;
        width: 1200px;
        height: 737px;
        background: teal url('https://pic.imgdb.cn/item/628c47e209475431292f4e27.jpg') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat

center/cover;
      opacity: .55;
      left:60px; top: 20px;
}
.progress {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 155px;
        height: 155px;
        left: 980px;
        top: 260px;
        border-radius: 50%;
        background: conic-gradient(from 180deg,#29ab7c0%,#e4f6f9 0%);
        cursor: pointer;
}

.progress::before {
        position: absolute;
        content: attr(data-per);
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: #F0FFFF url('https://pic.imgdb.cn/item/628b8f9c094754312934ff4c.jpg');
        text-align: center;
        font: normal 26px / 135px sans-serif;
}

</style>

<div class="wrap">
        <div class="progress" data-per="0%"></div>
        <audio id="aud" src="https://www.joy127.com/url/24581.mp3" loop="loop"
autoplay="autoplay"></audio>
</div><br><br><br><br><br><br>

<script>

let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

progress.onclick = () =>{
        aud.paused ? aud.play() : aud.pause();
};

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        progress.style.background = `conic-gradient(from 180deg,#29ab7c ${prog}%,#e4f6f9 ${prog}%)`;
        progress.setAttribute('data-per', prog.toFixed() + '%');
}

</script>
<br><br><br><br><br><br><br><br><br><br>

加林森 发表于 2022-5-23 21:56

本帖最后由 加林森 于 2022-5-23 21:58 编辑

夜玫瑰-陈明


等着你真心爱我

在我美丽的时刻

如果没有你谁会珍惜我

孤单中清风吻我

为何你不来看我

在我灿烂的时刻

天上的星星银河的传说

什么时候知道结果

我是夜色中的玫瑰

不愿看见落花的泪

也许是我把爱情想得太美

相信付出的爱会让我醉一回

我是夜色中的玫瑰

等候的心芬芳如水

我的世界留下对你梦的妩媚

不要让我等到心已碎

为何你不来看我

在我灿烂的时刻

天上的星星银河的传说

什么时候知道结果

我是夜色中的玫瑰

不愿看见落花的泪

也许是我把爱情想得太美

相信付出的爱会让我醉一回

我是夜色中的玫瑰

等候的心芬芳如水

我的世界留下对你梦的妩媚

不要让我等到心已碎

我是夜色中的玫瑰

不愿看见落花的泪

也许是我把爱情想得太美

相信付出的爱会让我醉一回

我是夜色中的玫瑰

等候的心芬芳如水

我的世界留下对你梦的妩媚

不要让我等到心已碎

马黑黑 发表于 2022-5-23 22:20

给力

加林森 发表于 2022-5-23 22:26

马黑黑 发表于 2022-5-23 22:20
给力

谢谢老黑啦。{:4_191:}

马黑黑 发表于 2022-5-23 22:56

加林森 发表于 2022-5-23 22:26
谢谢老黑啦。

客气客气

加林森 发表于 2022-5-23 23:11

马黑黑 发表于 2022-5-23 22:56
客气客气

{:4_191:}

红影 发表于 2022-5-24 09:13

歌曲好听。大图有点虚呢，是放大的缘故？{:4_204:}

梦油 发表于 2022-5-24 10:35

图中给的几束灯光恰到好处。

加林森 发表于 2022-5-24 10:40

红影 发表于 2022-5-24 09:13
歌曲好听。大图有点虚呢，是放大的缘故？

这个是调整的。

加林森 发表于 2022-5-24 10:40

梦油 发表于 2022-5-24 10:35
图中给的几束灯光恰到好处。

是啊

梦油 发表于 2022-5-24 10:45

加林森 发表于 2022-5-24 10:40
是啊

特别是给小原图的那一束

加林森 发表于 2022-5-24 10:52

梦油 发表于 2022-5-24 10:45
特别是给小原图的那一束

那个是播放器。

梦油 发表于 2022-5-24 16:30

加林森 发表于 2022-5-24 10:52
那个是播放器。

知道了，谢谢你。

加林森 发表于 2022-5-24 16:37

梦油 发表于 2022-5-24 16:30
知道了，谢谢你。

不客气的。
页: [1]
查看完整版本: 《夜玫瑰》- 陈明