秋林 - 落水水 （根据老黑教程试验制作）
本帖最后由 加林森 于 2022-5-24 11:18 编辑 <br /><br /><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 2px50px 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>
<br><br><div style="LEFT: -302px; WIDTH: 1080px; POSITION: relative; TOP: -0.01px">
<div style="float:left;border:solid 1px 000;"><img src="https://pic.imgdb.cn/item/628c439809475431292a1c38.jpg"></div>
</div>
<div class="wrap">
<div class="drop"></div>
<div class="water"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/78427.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>
本帖最后由 加林森 于 2022-5-24 11:21 编辑
@马黑黑
2021年9月4日 秋林，不但是中国客语民谣代表，2018年台湾金曲奖最佳客语歌手，还是集内地唱作人、音乐制作人、词曲作家、影视配乐师为一身之实力者。
歌词：
又听打雷声
阿婆坐门槛
孩子快过来
唱歌阿婆听
我坐阿婆边
唱歌阿婆听
看到落大水
心里乐翻天
落水水
啵啵嗯
唱条歌仔阿婆听
阿婆说我罗罗仔
我说阿婆老绷根
落水水
啵啵嗯
唱条歌仔阿婆听
阿婆话我罗罗仔
我说阿婆老绷根
又听打雷声
阿婆坐门槛
孩子快过来
唱歌阿婆听
我坐阿婆边
唱歌阿婆听
阿婆出力笑
一下变后生
落水水
啵啵嗯
唱条歌仔阿婆听
阿婆说我罗罗仔
我说阿婆老绷根
落水水
啵啵嗯
唱条歌仔阿婆听
阿婆话我罗罗仔
你学的可真快，活学活用啊！ 梦油 发表于 2022-5-24 10:54
你学的可真快，活学活用啊！
必须的啊。{:4_189:} 终于装进图片里面了。 杯子里装不下的海水，被队长做成了杯子里装不下的秋水。很赞{:4_187:} 霓虹 发表于 2022-5-24 11:28
杯子里装不下的海水，被队长做成了杯子里装不下的秋水。很赞
就是，挺好玩的。霓虹中午好！{:4_187:} 醉美水芙蓉 发表于 2022-5-24 11:31
队长厉害！这么快就做了一个！
好看不？{:4_189:} 加林森 发表于 2022-5-24 11:30
就是，挺好玩的。霓虹中午好！
做的挺漂亮的，队长厉害{:4_187:} 醉美水芙蓉 发表于 2022-5-24 11:31
队长厉害！这么快就做了一个！
嗯嗯，跟着学的。 霓虹 发表于 2022-5-24 12:08
做的挺漂亮的，队长厉害
谢谢！{:4_187:} 加林森 发表于 2022-5-24 11:09
终于装进图片里面了。
前面说过，这些就是道具或工具的东东，装到哪都可以的，这不，成了 马黑黑 发表于 2022-5-24 12:18
前面说过，这些就是道具或工具的东东，装到哪都可以的，这不，成了
是的。我修改了一些小数点的。 加林森 发表于 2022-5-24 12:20
是的。我修改了一些小数点的。
不错的 队长学得真快，这么快就做出来了。很漂亮的制作{:4_187:} 马黑黑 发表于 2022-5-24 12:22
不错的
嗯嗯，是的。 红影 发表于 2022-5-24 12:41
队长学得真快，这么快就做出来了。很漂亮的制作
看见老黑发出这个代码就想玩一玩的。 加林森 发表于 2022-5-24 10:58
必须的啊。
有悟性啊！ 梦油 发表于 2022-5-24 16:35
有悟性啊！
必须要有的哦。{:4_189:}
页:
[1]
2