论坛 › 欢乐水吧 › 茶乐花香

绿叶清舟 发表于 2022-10-18 19:55

茶乐花香

<style>
.wrap {
        left: -250px;
        width: 1100px;
        height: 700px;
        background: #ccc url('https://pic1.imgdb.cn/item/634e8edb16f2c2beb1f2f663.jpg') no-repeat;
        box-shadow: 2px 2px 10px gray;
        position: relative;
}
.candle {
        width: 2px;
        height: 80px;
        left: 659px;
        bottom: 140px;
        cursor: pointer;
        background: #ffdec0 linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.6));
        box-shadow: 0 0 20px gray;
        position: absolute;
}
.candle::before {
        position: absolute; content: ''; width: 2px; height: 2px;
        top: -px; left: calc(50% - 1px); border-radius: 0 100%;
        background: #fe0215; box-shadow: -1px -8px 24px 6px #f5f5f5;
        transform-origin: bottom: 210px; animation: swag 2s ease-in infinite alternate;
}
@keyframes swag { to { transform: rotate(10deg); } }
</style>

<div class="wrap">
        <div class="candle"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=501220960.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let candle = document.querySelector('.candle'), aud = document.querySelector('#aud');
let current, task;

candle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        candle.style.height = 160 - prog * 1.6 + 'px';
}
</script>

马黑黑 发表于 2022-10-18 19:57

焚香品茶，好境界

小辣椒 发表于 2022-10-18 20:06

清舟的图图每个都意境特别美{:4_178:}

小辣椒 发表于 2022-10-18 20:08

这图颜色特别好看。和茶叶颜色差不多，隔着屏幕可以闻到香味{:4_170:}

绿叶清舟 发表于 2022-10-18 20:09

马黑黑 发表于 2022-10-18 19:57
焚香品茶，好境界

今天把香给点着了

绿叶清舟 发表于 2022-10-18 20:11

小辣椒 发表于 2022-10-18 20:06
清舟的图图每个都意境特别美

辣椒好，几天没来水里发贴，今天敬茶来了

绿叶清舟 发表于 2022-10-18 20:12

小辣椒 发表于 2022-10-18 20:08
这图颜色特别好看。和茶叶颜色差不多，隔着屏幕可以闻到香味

茶香被闻去了，得收钱了{:4_189:}

小辣椒 发表于 2022-10-18 20:13

绿叶清舟 发表于 2022-10-18 20:12
茶香被闻去了，得收钱了

哇瑟·····清舟派个人来收钱{:4_170:}

小辣椒 发表于 2022-10-18 20:14

绿叶清舟 发表于 2022-10-18 20:11
辣椒好，几天没来水里发贴，今天敬茶来了

清舟每个帖都精致{:4_179:}

红影 发表于 2022-10-18 20:14

这次留意了，播放器就是那根香烛，一点点燃下来，构思真巧妙{:4_187:}

红影 发表于 2022-10-18 20:15

斟茶的小美女心无旁骛，很专注{:4_204:}

绿叶清舟 发表于 2022-10-18 20:37

小辣椒 发表于 2022-10-18 20:13
哇瑟·····清舟派个人来收钱

好啊，冬雨缺勤这么久，就罚他了{:4_189:}

绿叶清舟 发表于 2022-10-18 20:39

红影 发表于 2022-10-18 20:14
这次留意了，播放器就是那根香烛，一点点燃下来，构思真巧妙

今天终于把香点着了，昨天没注意那个点的定位老是点歪就改成白色的了

小辣椒 发表于 2022-10-18 20:43

绿叶清舟 发表于 2022-10-18 20:37
好啊，冬雨缺勤这么久，就罚他了

哈哈~~~帮你呼叫@冬天的雨

小辣椒 发表于 2022-10-18 20:46

绿叶清舟 发表于 2022-10-18 20:09
今天把香给点着了

今天看见有红点了，这个香果然隔屏又闻到了{:4_170:}

马黑黑 发表于 2022-10-18 20:56

绿叶清舟 发表于 2022-10-18 20:09
今天把香给点着了

打火机消耗了几个

绿叶清舟 发表于 2022-10-18 20:58

小辣椒 发表于 2022-10-18 20:46
今天看见有红点了，这个香果然隔屏又闻到了

等冬雨收完第一次再罚他来收回烟香钱{:4_189:}

绿叶清舟 发表于 2022-10-18 20:58

马黑黑 发表于 2022-10-18 20:56
打火机消耗了几个

家里的都用完啦

马黑黑 发表于 2022-10-18 20:59

绿叶清舟 发表于 2022-10-18 20:58
家里的都用完啦

再去买，反正不贵

绿叶清舟 发表于 2022-10-18 21:00

红影 发表于 2022-10-18 20:15
斟茶的小美女心无旁骛，很专注

这动作多美，不象咱倒茶时一手就叉着腰的{:4_189:}

查看完整版本: 茶乐花香