《生命之光》- 卓舒晨
本帖最后由 加林森 于 2022-5-25 18:22 编辑 <br /><br /><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::Crimson {
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-24 21:10 编辑
生命之光 - 卓舒晨
思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降
任凭全力抵抗
也忍不住沮丧
湿了妆
独自疗伤
努力走出迷惘
就算反复无常
别放手
总有一束光为你点亮
思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降
任凭全力抵抗
也忍不住沮丧
湿了妆
独自疗伤
努力走出迷惘
就算反复无常
别放手
总有一束光为你点亮
思念如钟摆在眼前摇晃
像伤口愈合时刺痛的痒
压抑不住的热情仍在膨胀
最后不经意间选择投降 @马黑黑 队长又完成个新版的杯子里的海，基本每股效果都做过一遍呢，真勤奋{:4_199:} 醉美水芙蓉 发表于 2022-5-24 21:40
欣赏队长佳作！
谢谢水芙蓉！晚上好！{:4_171:} 红影 发表于 2022-5-24 21:41
队长又完成个新版的杯子里的海，基本每股效果都做过一遍呢，真勤奋
是的，跟到学习就得这样“每股”玩一下。{:4_170:} 这个主题，杯子里的液体可以考虑红色系列 老黑说得对。我现在下电脑了，用手机在看，明天来改吧。谢谢啦！ 马黑黑 发表于 2022-5-24 22:17
这个主题，杯子里的液体可以考虑红色系列
我怎么找不到修改的地方啊？ 加林森 发表于 2022-5-24 21:48
是的，跟到学习就得这样“每股”玩一下。
每个，哈哈，我打错字了，不过每股也不错，投资有回报{:4_189:} 红影 发表于 2022-5-25 11:43
每个，哈哈，我打错字了，不过每股也不错，投资有回报
就是就是。{:4_189:} 加林森 发表于 2022-5-25 09:07
我怎么找不到修改的地方啊？
.water选择器和伪元素 马黑黑 发表于 2022-5-25 13:27
.water选择器和伪元素
整晕啦。现在脑壳不好使了。{:5_113:} 加林森 发表于 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
就是就是。
投入的学习也有回报{:4_187:} 红影 发表于 2022-5-25 15:42
投入的学习也有回报
是啊。 马黑黑 发表于 2022-5-25 13:51
就是看看代码，我有注释的，水体那个。不过，我没有权限查看你的原始代码，只能通过源码看到，似乎有点什 ...
老黑，代码我发出来。你看看是哪里有问题？
页:
[1]
2