单曲欣赏--大约在冬季
本帖最后由 宁静 于 2023-2-22 15:53 编辑 <br /><br /><style>.wrap {
left: -280px;top:150px;
width: 1440px;
height: 737px;
background: teal url('https://wj.zp68.com/lxx//yunhua/2022/05/19/da.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://wj.zp68.com/lxx//yunhua/2022/05/19/xue.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://wj.zp68.com/lxx//yunhua/2022/05/19/x.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=485992506.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> 沙发，天热看这样的图图顿生凉意！
谢谢宁静！{:10_402:} 楚心兰 发表于 2022-7-15 21:19
沙发，天热看这样的图图顿生凉意！
谢谢宁静！
问好楚心兰，谢谢欣赏~{:10_403:}
宁静 发表于 2022-7-15 21:21
问好楚心兰，谢谢欣赏~
你好，宁静。
我以前有个朋友和你一个网名，看到你觉得亲切。
哇，看着就凉爽，雪花儿飘飘，好听，曾经迷了多少人的歌 宁静晚上好{:10_401:} 楚心兰 发表于 2022-7-15 21:23
你好，宁静。
我以前有个朋友和你一个网名，看到你觉得亲切。
是吗？这个名字的人还不止我一个人{:9007:}
一抹微蓝 发表于 2022-7-15 21:27
哇，看着就凉爽，雪花儿飘飘，好听，曾经迷了多少人的歌
蓝蓝来了，最近太热了，我们这里都是40多
宁静 发表于 2022-7-15 21:35
是吗？这个名字的人还不止我一个人
肯定是啊，{:7_304:}
一抹微蓝 发表于 2022-7-15 21:27
宁静晚上好
蓝蓝抱一个{:10_401:}