马黑黑 发表于 2022-5-24 13:28

大海装不进杯子（新杯测试）

本帖最后由 马黑黑 于 2022-5-24 13:37 编辑 <br /><br /><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>

马黑黑 发表于 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>


加林森 发表于 2022-5-24 13:58

老黑现在这个制作真的很完美了，真漂亮！{:4_199:}

依蘩 发表于 2022-5-24 15:52

黑马的帖子是高水平的

红影 发表于 2022-5-24 16:07

安静地坐在这里，等着黑黑的杯子装满{:4_187:}

马黑黑 发表于 2022-5-24 19:21

红影 发表于 2022-5-24 16:07
安静地坐在这里，等着黑黑的杯子装满

好像永远装不满{:4_170:}

加林森 发表于 2022-5-24 19:42

马黑黑 发表于 2022-5-24 19:21
好像永远装不满

我发的那个就没有装满的。

马黑黑 发表于 2022-5-24 19:45

加林森 发表于 2022-5-24 19:42
我发的那个就没有装满的。

想象一下就知道为什么不让装满。从立体的角度看，杯子装满的程度是到杯口椭圆的最下边缘，故而从平面的角度看它不满。

冬天的雨 发表于 2022-5-24 20:09

马老师这个代码漂亮的，红影美女原来是玩的这个{:4_199:}

加林森 发表于 2022-5-24 20:32

马黑黑 发表于 2022-5-24 19:45
想象一下就知道为什么不让装满。从立体的角度看，杯子装满的程度是到杯口椭圆的最下边缘，故而从平面的角 ...

是的。你这个制作也是快到顶时音乐就完了。我那个差小半瓶就满了的。

马黑黑 发表于 2022-5-24 20:55

加林森 发表于 2022-5-24 20:32
是的。你这个制作也是快到顶时音乐就完了。我那个差小半瓶就满了的。

计算不同

加林森 发表于 2022-5-24 20:59

马黑黑 发表于 2022-5-24 20:55
计算不同

是的。我准备马上制作你这个帖了。

马黑黑 发表于 2022-5-24 20:59

冬天的雨 发表于 2022-5-24 20:09
马老师这个代码漂亮的，红影美女原来是玩的这个

你也来玩玩

马黑黑 发表于 2022-5-24 21:00

加林森 发表于 2022-5-24 20:59
是的。我准备马上制作你这个帖了。

挺好

加林森 发表于 2022-5-24 21:02

马黑黑 发表于 2022-5-24 21:00
挺好

嗯嗯，谢谢你！

红影 发表于 2022-5-24 21:03

马黑黑 发表于 2022-5-24 19:21
好像永远装不满

那就从头再装{:4_173:}

醉美水芙蓉 发表于 2022-5-24 21:10

朵拉 发表于 2022-5-24 22:07

马老师 晚上好，背景图漂亮，可以分享么{:4_178:}

马黑黑 发表于 2022-5-24 22:18

朵拉 发表于 2022-5-24 22:07
马老师 晚上好，背景图漂亮，可以分享么

我的东东是全公开的

马黑黑 发表于 2022-5-24 22:20

红影 发表于 2022-5-24 21:03
那就从头再装

反正可以反反复复
页: [1] 2
查看完整版本: 大海装不进杯子（新杯测试）