要快点学到需要自己去试，在试做中感受是最好的了。
就是的，必须多制作才能领悟呢。
<style>
.wrap {
margin: 50px auto 0;
width: 100px;
height: 160px;
background: #ccc linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.25));
box-shadow: 2px 2px50px rgba(0,0,0,.6);
position: relative;
}
.wrap::before, .wrap::after {
position: absolute;
content: '';
width: 100%;
height: 60px;
left: -1px;
border: 1px solid #eee;
border-radius: 50%;
filter: blur(2px);
}
.wrap::before {
top: -20px;
background: #ddd;
}
.wrap::after {
bottom: -20px;
background: lightblue;
}
.water {
width: inherit;
height: 60px;
border-radius: 50% / 20%;
background: lightblue;
bottom: 0;
position: absolute;
}
.water::before, .water::after { position: absolute; content: ''; }
.water::before {
width: 30px;
height: 8px;
left: calc(50% - 15px);
top: 10px;
border-radius: 50%;
border:1px solid rgba(255,255,255,.55);
opacity: 0;
box-shadow: -2px -2px 10px 0 #eee;
animation: rot 1s .5s linear infinite;
}
.drop {
position: absolute;
width:15px;
height: 15px;
left: calc(50% - 8px);
top: -50px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: lightblue;
transform: rotate(-45deg);
animation: drop 1s linear infinite;
}
@keyframes rot { to { opacity: .5; transform: scale(2.5); } }
@keyframes drop { to { top: 140px; } }
</style>
<br><br><div style="LEFT: -302px; WIDTH: 1080px; POSITION: relative; TOP: -0.01px">
<div style="float:left;border:solid 1px 000;"><img src="https://pic.imgdb.cn/item/628c439809475431292a1c38.jpg"></div>
</div>
<div class="wrap">
<div class="drop"></div>
<div class="water"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/78427.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aud = document.querySelector('#aud');
let controler = document.querySelector('.wrap');
let prgbox = document.querySelector('.water');
let task, current;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
controler.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt + 40;
prgbox.style.height =prog + 'px';
}
</script>
加林森 发表于 2022-3-28 16:45
就是的，必须多制作才能领悟呢。
是的，完全正确。 红影 发表于 2022-3-28 16:57
是的，完全正确。
嗯嗯。
页:
1
[2]