别哭 我最爱的人TO：小辣椒
<style>.wrap {
left: -360px;top:150px;
width: 1300px;
height: 650px;
background: teal url('https://pic.imgdb.cn/item/62892fe209475431298132e1.jpg') no-repeat
center/cover;
position: relative;
box-shadow:4px 4px 5px #333;
border-radius:8px;
}
.wrap::before {
content: '';
position: absolute;
width: 60%;
height: 60%;
background: url('https://pic.imgdb.cn/item/62892d8509475431297febe8.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: 360px;
border-radius: 50%;
background: conic-gradient(from 180deg,#29ab7c 0%,#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/6289300709475431298145f4.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=5248005.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-22 12:49
@小辣椒
来了 冬雨也是做了{:4_199:} 小辣椒 发表于 2022-5-22 12:51
来了 冬雨也是做了
上次那个岁月同做H5播放器的图，做图没有时间就简单做一个了 冬天的雨 发表于 2022-5-22 12:53
上次那个岁月同做H5播放器的图，做图没有时间就简单做一个了
套用速度快的，这个你肯定会的 冬小雨来啦！ {:4_187:} 真开心 {:4_191:}制作非常棒！入景，入情 再不来猫快眼泪哭干了，
{:4_204:}{:4_179:} 周末快乐！ 小辣椒 发表于 2022-5-22 12:54
套用速度快的，这个你肯定会的
没有时间玩，我就下的，你也是去休息{:4_197:}{:4_185:} 大猫咪 发表于 2022-5-22 12:54
冬小雨来啦！真开心 制作非常棒！入景，入情 再不来猫快眼泪哭干了，
{:4_20 ...
套用猫猫的代码做一个{:4_187:} 大猫咪 发表于 2022-5-22 12:54
冬小雨来啦！真开心 制作非常棒！入景，入情 再不来猫快眼泪哭干了，
{:4_20 ...
哈哈，猫再哭我看看是不是更加美了{:4_170:} 冬天的雨 发表于 2022-5-22 12:55
没有时间玩，我就下的，你也是去休息
好的，我也是就下了，去午睡了 小辣椒 发表于 2022-5-22 12:58
好的，我也是就下了，去午睡了
多休息，少玩 图融合的太棒了 把歌的意境表现的淋漓尽致 真棒！谢谢兄弟 {:4_179:} 本帖最后由 大猫咪 于 2022-5-22 13:02 编辑
冬天的雨 发表于 2022-5-22 12:57
哈哈，猫再哭我看看是不是更加美了https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages03%2F20210430%2F0a7387eab14947a495b220935f3b1a90.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655787680&t=f5a0611eda81e5ddefc3030b7024eede
大猫咪 发表于 2022-5-22 12:59
图融合的太棒了 把歌的意境表现的淋漓尽致 真棒！谢谢兄弟
猫猫的做的意境特别美 来欣赏作品 冬雨真勤快，有有空来就出作品 小辣椒收礼开心 冬天的雨 发表于 2022-5-22 13:01
猫猫的做的意境特别美
和辣椒学习的 代码还是不熟悉 走过岁月 发表于 2022-5-22 13:02
来欣赏作品
岁月兄弟来了{:4_187:} 周末快乐 {:4_191:}{:4_179:}