《生命之光》- 卓舒晨

加林森

加林森

生命之光 - 卓舒晨

思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降
任凭全力抵抗
也忍不住沮丧
湿了妆
独自疗伤
努力走出迷惘
就算反复无常
别放手
总有一束光为你点亮
思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降
任凭全力抵抗
也忍不住沮丧
湿了妆
独自疗伤
努力走出迷惘
就算反复无常
别放手
总有一束光为你点亮
思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降

加林森

@马黑黑

红影

队长又完成个新版的杯子里的海，基本每股效果都做过一遍呢，真勤奋

加林森

醉美水芙蓉 发表于 2022-5-24 21:40
欣赏队长佳作！

谢谢水芙蓉！晚上好！

加林森

红影 发表于 2022-5-24 21:41
队长又完成个新版的杯子里的海，基本每股效果都做过一遍呢，真勤奋

是的，跟到学习就得这样“每股”玩一下。

马黑黑

这个主题，杯子里的液体可以考虑红色系列

加林森

老黑说得对。我现在下电脑了，用手机在看，明天来改吧。谢谢啦！

加林森

马黑黑 发表于 2022-5-24 22:17
这个主题，杯子里的液体可以考虑红色系列

我怎么找不到修改的地方啊？

红影

加林森 发表于 2022-5-24 21:48
是的，跟到学习就得这样“每股”玩一下。

每个，哈哈，我打错字了，不过每股也不错，投资有回报

加林森

红影 发表于 2022-5-25 11:43
每个，哈哈，我打错字了，不过每股也不错，投资有回报

就是就是。

马黑黑

加林森 发表于 2022-5-25 09:07
我怎么找不到修改的地方啊？

.water选择器和伪元素

加林森

马黑黑 发表于 2022-5-25 13:27
.water选择器和伪元素

整晕啦。现在脑壳不好使了。

马黑黑

加林森 发表于 2022-5-25 13:46
整晕啦。现在脑壳不好使了。

就是看看代码，我有注释的，水体那个。不过，我没有权限查看你的原始代码，只能通过源码看到，似乎有点什么问题。

加林森

马黑黑 发表于 2022-5-25 13:51
就是看看代码，我有注释的，水体那个。不过，我没有权限查看你的原始代码，只能通过源码看到，似乎有点什 ...

这个是代码：
<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>

加林森

我现在出去锻炼了，等会再回来看看。

红影

加林森 发表于 2022-5-25 11:55
就是就是。

投入的学习也有回报

加林森

红影 发表于 2022-5-25 15:42
投入的学习也有回报

是啊。

加林森

马黑黑 发表于 2022-5-25 13:51
就是看看代码，我有注释的，水体那个。不过，我没有权限查看你的原始代码，只能通过源码看到，似乎有点什 ...

老黑，代码我发出来。你看看是哪里有问题？