|
|

楼主 |
发表于 2022-5-24 07:48
|
显示全部楼层
谁有兴趣完善一下:
- <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 2px 50px rgba(0,0,0,.6);
- position: relative;
- }
- .wrap::before, .wrap::after {
- position: absolute;
- content: '';
- width: 100%;
- height: 40px;
- 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: 40px;
- 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>
- <div class="wrap">
- <div class="drop"></div>
- <div class="water"></div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894212543.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>
复制代码
|
|