加林森 发表于 2022-1-24 09:22
就是，把版面搞喜庆点很舒服的。
会让人感受到喜庆的气氛。
本帖最后由 加林森 于 2022-5-25 21:15 编辑 <br /><br />红影 发表于 2022-1-24 12:14
会让人感受到喜庆的气氛。
就是啊。
<style>
.wrap {
left: -302px;top:150px;
width: 1200px;
height: 675px;
background: teal url('https://pic.imgdb.cn/item/628e299b0947543129bd64f4.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/628e2ba60947543129c05e37.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/90487.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>
队长 上面一面怎么有2个灯笼
学习黑黑的css制作多练习几个，可以积累经验的，队长加油！
小辣椒 发表于 2022-1-24 21:23
队长 上面一面怎么有2个灯笼
我跟老黑学习的啊。
小辣椒 发表于 2022-1-24 21:24
学习黑黑的css制作多练习几个，可以积累经验的，队长加油！
嗯嗯，谢谢小辣椒了。{:4_187:}{:4_190:}
小辣椒 发表于 2022-1-24 21:23
队长 上面一面怎么有2个灯笼
我又发了一个出来，去看看。