大约在冬季（学习黑黑的音标）TO：红影
<style>
.wrap {
left: -420px;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> 谢谢亲爱的不动脑子直接套用了你的@红影 谢谢黑黑，各种教程分享 辛苦了@马黑黑 小辣椒制作得真漂亮。赞！{:4_199:} 漂酿 小辣椒朋友制作的背景画面太美了，它使得歌曲和背景水乳交融、浑然一体，呈现给人们一种十分美好的意境。 马黑黑 发表于 2022-5-20 17:44
漂酿
黑黑，我手机看小圆周围的颜色没有出来 小辣椒 发表于 2022-5-20 18:56
黑黑，我手机看小圆周围的颜色没有出来
没试过用手机看，但手机的浏览器也是重要的，你可以考虑Chrome浏览器或用其内核的浏览器。我的代码都基于Chrome浏览器，不考虑兼容其他浏览器。 马黑黑 发表于 2022-5-20 19:07
没试过用手机看，但手机的浏览器也是重要的，你可以考虑Chrome浏览器或用其内核的浏览器。我的代码都基于 ...
手机现在也是奇怪，许多论坛都无法打开了，一片白，花潮还好可以手机欣赏 真漂亮！歌曲图片融合的真棒！ 入情 入景， 真棒！红影收礼物开心！周末快乐！
{:4_187:}{:4_199:} 小辣椒 发表于 2022-5-20 19:17
手机现在也是奇怪，许多论坛都无法打开了，一片白，花潮还好可以手机欣赏
整治中吧 好清爽的画面，好喜欢。谢谢亲爱的漂亮礼物{:4_179:} 现在冬天很少看到雪了，在亲爱的帖子里看到美丽的雪，好开心啊{:4_187:} {:4_174:} 大猫咪 发表于 2022-5-20 19:53
真漂亮！歌曲图片融合的真棒！ 入情 入景， 真棒！红影收礼物开心！周末快乐！
猫猫晚上好{:4_187:}
谢谢欣赏 马黑黑 发表于 2022-5-20 20:00
整治中吧
我发现是一方面手机的浏览器，但我朋友说是论坛没有通过什么证书和检查之类也是会这样 红影 发表于 2022-5-20 20:06
好清爽的画面，好喜欢。谢谢亲爱的漂亮礼物
亲爱的，你最棒，我是套用你的{:4_179:} 红影 发表于 2022-5-20 20:08
现在冬天很少看到雪了，在亲爱的帖子里看到美丽的雪，好开心啊
这个雪花不够真实，本来想缩小再加2个图片，结果感觉要动脑子了，就马上改了%60大小场景就这样了 加林森 发表于 2022-5-20 17:36
小辣椒制作得真漂亮。赞！
谢谢队长，小辣椒也是在学习中的 马黑黑 发表于 2022-5-20 17:44
漂酿
谢谢黑黑的教程分享，大家学习都很开心{:4_187:}