马黑黑 发表于 2022-5-28 21:45

夜读（半自传体）

<style>
.wrap {
        left: -100px;
        width: 960px;
        height: 636px;
        background: #ccc url('/data/attachment/forum/202205/28/214259xuygddg2ncc11qdq.jpg') no-repeat;
        box-shadow: 2px 2px 10px gray;
        position: relative;
}
.candle {
        width: 30px;
        height: 160px;
        left: 160px;
        bottom: 160px;
        cursor: pointer;
        background: #fff 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: 4px; height: 30px;
        top: -30px; left: calc(50% - 2px); border-radius: 0 100%;
        background: white; box-shadow: -1px -8px 24px 6px red;
        transform-origin: bottom; 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="https://music.163.com/song/media/outer/url?id=1824937995.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-5-28 21:46

沙发我的

小辣椒 发表于 2022-5-28 21:46

这个蜡烛也是好玩

马黑黑 发表于 2022-5-28 22:04

小辣椒 发表于 2022-5-28 21:46
这个蜡烛也是好玩

简化版的蜡烛

马黑黑 发表于 2022-5-28 22:04

小辣椒 发表于 2022-5-28 21:46
沙发我的

{:4_174:}

加林森 发表于 2022-5-28 22:13

老黑的这个定位漂亮。{:4_199:}

马黑黑 发表于 2022-5-28 22:16

加林森 发表于 2022-5-28 22:13
老黑的这个定位漂亮。

{:4_189:}

加林森 发表于 2022-5-28 22:19

马黑黑 发表于 2022-5-28 22:16


来根烟？{:4_203:}

红影 发表于 2022-5-28 22:32

那么小就开始读书破万卷啊，厉害{:4_173:}
有台灯还点蜡烛，这小人儿有点浪费啊{:4_173:}

马黑黑 发表于 2022-5-28 22:35

红影 发表于 2022-5-28 22:32
那么小就开始读书破万卷啊，厉害
有台灯还点蜡烛，这小人儿有点浪费啊

亮度要加强

马黑黑 发表于 2022-5-28 22:35

加林森 发表于 2022-5-28 22:19
来根烟？

不需要

加林森 发表于 2022-5-28 22:37

马黑黑 发表于 2022-5-28 22:35
不需要

就是嘛，这么小的娃儿不能抽烟的。

马黑黑 发表于 2022-5-28 22:51

加林森 发表于 2022-5-28 22:37
就是嘛，这么小的娃儿不能抽烟的。

是的，戒烟要从儿童做起

醉美水芙蓉 发表于 2022-5-28 22:56

加林森 发表于 2022-5-28 22:59

马黑黑 发表于 2022-5-28 22:51
是的，戒烟要从儿童做起

废话

马黑黑 发表于 2022-5-28 23:01

加林森 发表于 2022-5-28 22:59
废话

你反对？

马黑黑 发表于 2022-5-28 23:02

醉美水芙蓉 发表于 2022-5-28 22:56
小孩子眼睛要看坏的！保护眼睛！

这要看人来。有的人怎么用眼，眼睛都保持在5.0以上

加林森 发表于 2022-5-28 23:04

马黑黑 发表于 2022-5-28 23:01
你反对？

不反对的。但是决不准孩子抽烟的！

马黑黑 发表于 2022-5-28 23:56

加林森 发表于 2022-5-28 23:04
不反对的。但是决不准孩子抽烟的！
这不就结了

东篱闲人 发表于 2022-5-29 08:39

蜡放在台灯上，这是什么操作？{:5_115:}
页: [1] 2
查看完整版本: 夜读（半自传体）