|
|

楼主 |
发表于 2022-5-25 13:54
|
显示全部楼层
这个是代码:
<style>
.mama {
left: -242px;
width: 1080px;
height: 670px;
background: url('https://pic.imgdb.cn/item/628cd6290947543129132a82.jpg') no-repeat;
position: relative;
}
/* 杯子主体 */
.glass {
left: 10px;
bottom: 20px;
width: 100px;
height: 200px;
background: #ccc linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.35));
box-shadow: 0 0 10px gray;
position: absolute;
}
/* 伪元素:杯顶和杯底 */
.glass::before, .glass::after {
position: absolute;
content: '';
width: inherit;
height: 20px;
left: -1px;
border: 1px
border-radius: 50%;
filter: blur(1px);
}
/* 杯顶 底色与主体一致*/
.glass::before {
top: -10px;
background: inherit;/* linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.45));*/
}
/* 杯底 底色与水体一致 */
.glass::after {
bottom: -10px;
background: lightseagreen;
}
/* 水体 */
.water {
position: absolute;
width: 100%;
height: 30px;
border-radius: 50px / 5px;
background: lightseagreen;
bottom: 0;
}
/* 伪元素:水纹和水滴 */
.water::before, .water::Crimson; { position: absolute; content: ''; }
/* 水纹 */
.water::before {
width: 30px;
height: 10px;
left: calc(50% - 15px);
top: 10px;
border-radius: 50%;
border: 1px
box-shadow: inset 0 0 10px gray;
opacity: 0;
animation: scale 1s linear
animation: wave .8s .6s linear infinite;
}
/* 水滴 */
.water::after {
width:16px;
height: 16px;
left: calc(50% - 8px);
top: -200px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
background: lightseagreen;
transform: rotate(-45deg); Red;Crimson;
animation: drop .8s linear infinite;
}
/* 水纹动画 */
@keyframes wave { to { opacity: .5; transform: scale(2.5); } }
/* 水滴动画 */
@keyframes drop { to { top: 0px; } }
</style>
<div class="mama">
<div class="glass">
<div class="water"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/9487.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let aud = document.querySelector('#aud');
let controler = document.querySelector('.glass');
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) * 1.6 + 30;
prgbox.style.height = prog + 'px';
}
</script> |
|