灌水
<style>
#papa { margin: 0 0 0 calc(50% - 628px); display: grid; place-items: center; width: 1100px; height: 700px; background: gray url('https://pic.imgdb.cn/item/63d27657face21e9ef5fd49d.jpg') no-repeat center/cover; background-blend-mode: normal, color; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; perspective: 3000px; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: ''; pointer-events: none; }
#papa::before { background: black url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F05%2F20170405161332_HYMuU.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677325813&t=5bf60669055795822c10dcc079258a73'); mix-blend-mode: screen; border-radius: 0%; width: 300px; height: 300px; left: 410px; top: 320px; }
#papa::after { content: '当年一起灌的水'; font: bold 2.6em / 2.6em sans-serif; color: lightseagreen; text-shadow: 2px 2px 4px black; bottom: 10px; left: 0; transform: rotate(-18deg); }
/* 杯子主体 */
.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 id="papa"><div class="glass">
<div class="water"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1398875625.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script >
<div id="papa">
<span id="lrcbox">当年一起灌的水</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</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> 想来中年时水虽玩得厉害，但还会做些贴，玩玩制图倒腾几下网页的，漫步去玩得真不多，偶尔上去扔个贴，再后来停了有二年左右的吧，小老头带去另一个中年后有了守望玩起了纯灌水的，风云，版杀，贩人，玩银行 那几个谁，帮上有名的，快点来继续灌，让那个小罐子快点满起来{:4_189:} 你们还玩过风云的啊，什么时候杀一场？{:4_173:} 红影 发表于 2023-1-26 21:52
你们还玩过风云的啊，什么时候杀一场？
是啊那时遇到有谁生日或节日想不到其他的就风云了{:4_189:} 绿叶清舟 发表于 2023-1-26 21:58
是啊那时遇到有谁生日或节日想不到其他的就风云了
也不错，选个背景就开杀，也简单直接{:4_173:} 小老头带着几个菇凉玩版杀没带上俺{:4_173:} 你这是消防员的配置啊{:4_189:} 这个灌水太有水平了 欣赏老师佳作！ 红影 发表于 2023-1-26 23:03
也不错，选个背景就开杀，也简单直接
是啊，只要人凑齐了就可以玩 马黑黑 发表于 2023-1-26 23:38
小老头带着几个菇凉玩版杀没带上俺
那个中年你应该也去过的吧 鱼儿 发表于 2023-1-27 01:30
你这是消防员的配置啊
咱当年灌的一个消防员咋够啊{:4_189:} 庶民来了 发表于 2023-1-27 04:33
这个灌水太有水平了
就是个胡灌了 海笑 发表于 2023-1-27 11:44
欣赏老师佳作！
谢谢海笑 绿叶清舟 发表于 2023-1-27 16:47
那个中年你应该也去过的吧
貌似没去过 小版杀也可以{:4_170:} 俺是来查水表的，该交水费了{:4_397:} 水管子比针管子粗{:4_173:} 绿叶清舟 发表于 2023-1-27 16:47
是啊，只要人凑齐了就可以玩
还要找个勺子啊，反正我是不会吹哨{:4_173:}