|
|

楼主 |
发表于 2022-5-24 13:37
|
显示全部楼层
- <style>
- .mama {
- left: -242px;
- width: 1080px;
- height: 720px;
- background: url('/data/attachment/forum/202205/24/132344puogyus4ewmgysq1.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 solid snow;
- border-radius: 50%;
- filter: blur(1px);
- }
- /* 杯顶 底色与主体一致*/
- .glass::before {
- top: -10px;
- background: inherit;/* #ccc 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::after { position: absolute; content: ''; }
- /* 水纹 */
- .water::before {
- width: 30px;
- height: 10px;
- left: calc(50% - 15px);
- top: 10px;
- border-radius: 50%;
- border: 1px solid #ddd;
- box-shadow: inset 0 0 10px gray;
- opacity: 0;
- animation: scale 1s linear infinite;
- 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);
- 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://music.163.com/song/media/outer/url?id=33367876.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>
复制代码
|
|