加林森 发表于 2022-5-20 18:25

《爱Do》- 陈稷坤

本帖最后由 加林森 于 2022-5-20 20:42 编辑 <br /><br /><style>
.wrap {
      left: -422px;top:150px;
        width: 1440px;
        height: 737px;
        background: teal url('https://pic.imgdb.cn/item/6287653d0947543129505aff.jpg') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('https://pic.imgdb.cn/item/62876b0c094754312955e870.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/62878c7d09475431296c6b4a.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://music.163.com/song/media/outer/url?id=1845732406.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-20 18:25

爱Do-陈稷坤

作词 : 陈稷坤
作曲 : 陈稷坤
编曲 : 陈稷坤
制作人 : 陈稷坤
可能我做的早餐有点一般
可能我选的电影你也不喜欢
但别沮丧我会适应你的习惯
学会让人流连忘返温暖的配方
还能看多久你欣赏的目光
还能是什么吸引彼此的心脏
现实理想 你不用再自己扛
退让不是投降 但也保留些倔强
I do I do 这是我对你的爱 yeah
I do I do 这是我对你的爱 yeah
你无理取闹我装糊涂
你的向往我不会辜负
I do I do
这是我对你的爱 爱
还能看多久你欣赏的目光
还能是什么吸引彼此的心脏
现实理想 今后都由我来扛
退让不是投降 但也保留些倔强
I do I do 这是我对你的爱 yeah
I do I do 这是我对你的爱 yeah
你无理取闹我装糊涂
你的向往我不会辜负
I do I do
这是我对你的爱
总有些期待落空成遗憾
没有什么完美的答案
天空有时灰色终有时蓝
但愿我总能在你左右在你心上
I do I do 这是我对你的爱 yeah
I do I do 这是我对你的爱 yeah
你无理取闹我装糊涂
你的向往我不会辜负
I do I do
这是我对你的爱 爱 爱 爱 爱yeah
这是我对你的爱 爱 爱 爱 爱yeah
这是我对你的

加林森 发表于 2022-5-20 18:32

@马黑黑 @小辣椒

马黑黑 发表于 2022-5-20 19:05

没分了

加林森 发表于 2022-5-20 19:15

马黑黑 发表于 2022-5-20 19:05
没分了

没有分说明你给别人加得多嘛。你辛苦了！{:4_190:}

大猫咪 发表于 2022-5-20 19:51

这个真漂亮，按钮还可以这样玩啊 ，队长厉害！赞！

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

马黑黑 发表于 2022-5-20 20:00

加林森 发表于 2022-5-20 19:15
没有分说明你给别人加得多嘛。你辛苦了！

{:4_170:}

红影 发表于 2022-5-20 20:10

很漂亮的制作。队长真棒。其实那个按钮里的小图也可以换一下的{:4_187:}

加林森 发表于 2022-5-20 20:28

大猫咪 发表于 2022-5-20 19:51
这个真漂亮，按钮还可以这样玩啊 ，队长厉害！赞！

我是跟到学的，抽个热闹呢。{:4_189:}

加林森 发表于 2022-5-20 20:28

马黑黑 发表于 2022-5-20 20:00


开心了哇。。。。{:4_172:}

加林森 发表于 2022-5-20 20:28

红影 发表于 2022-5-20 20:10
很漂亮的制作。队长真棒。其实那个按钮里的小图也可以换一下的

怎么换？

大猫咪 发表于 2022-5-20 20:28

加林森 发表于 2022-5-20 20:28
我是跟到学的，抽个热闹呢。

有创意{:4_187:}

加林森 发表于 2022-5-20 20:30

大猫咪 发表于 2022-5-20 20:28
有创意

你也可以制作的。{:4_204:}

大猫咪 发表于 2022-5-20 20:30

加林森 发表于 2022-5-20 20:30
你也可以制作的。

嗯慢慢学习{:4_190:}{:4_179:}

加林森 发表于 2022-5-20 20:37

大猫咪 发表于 2022-5-20 20:30
嗯慢慢学习

好的好的。

小辣椒 发表于 2022-5-20 21:00

加林森 发表于 2022-5-20 18:32
@马黑黑 @小辣椒

来了。。。队长晚上好{:4_187:}

小辣椒 发表于 2022-5-20 21:02

队长做的真漂亮{:4_178:}

加林森 发表于 2022-5-20 21:03

小辣椒 发表于 2022-5-20 21:00
来了。。。队长晚上好

小辣椒晚上好！{:4_204:}

加林森 发表于 2022-5-20 21:04

小辣椒 发表于 2022-5-20 21:02
队长做的真漂亮

我变化了一下，感觉这样更加好看的。

醉美水芙蓉 发表于 2022-5-20 21:30

页: [1] 2
查看完整版本: 《爱Do》- 陈稷坤