论坛 › 欢乐水吧 › 学习镜像反射

醉美水芙蓉 发表于 2022-5-29 16:01

学习镜像反射

本帖最后由 醉美水芙蓉 于 2022-5-29 16:01 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0">
<style>
.myBox {
        left: -300px;
        width: 1200px;
        height: 600px;
        box-shadow: 2px 2px 4px gray;
        position: relative;
}
.reflect {
        width: 600px;
        height: 600px;
        background: url('http://pan.yinhuabbs.cn/view.php/7ca7b047715414963af8def102bd6618.jpg') no-repeat;
        box-reflect: right;
        -webkit-box-reflect: right;
}
.tube {
        display: flex;
        justify-content: center;
        width: 10px;
        height: 100px;
        left: 415px; top: 50px;
        background-color: #eee;
        background: linear-gradient(#aaa 1px, #eee 1px);
        background-size: 8px 10px;
        box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
}
.meter {
        position: absolute;
        width: 4px;
        height: 0;
        background: rgba(255,0,0,.65);
        bottom: 0;
}
</style>

<div class="myBox">
        <div class="reflect">
                <div class="tube">
                        <div class="meter"></div>
                </div>
        </div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1899042430.mp3" autoplay="autoplay" loop="loop"></audio>

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

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

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

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        meter.style.height = prog + '%';
        circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
</td></tr></table>

加林森 发表于 2022-5-29 16:20

水芙蓉这个制作中规中矩，漂亮。{:4_199:}

醉美水芙蓉 发表于 2022-5-29 16:22

加林森 发表于 2022-5-29 16:20
水芙蓉这个制作中规中矩，漂亮。

这个选图不好选！

加林森 发表于 2022-5-29 16:57

醉美水芙蓉 发表于 2022-5-29 16:22
这个选图不好选！

是的，你制作得挺美的。

红影 发表于 2022-5-29 17:23

这个镜射后浑然一体，好漂亮。水芙蓉好棒{:4_199:}

醉美水芙蓉 发表于 2022-5-29 17:33

红影 发表于 2022-5-29 17:23
这个镜射后浑然一体，好漂亮。水芙蓉好棒

谢谢红影美女支持！

马黑黑 发表于 2022-5-29 19:09

我这里图片一直加载不出来

醉美水芙蓉 发表于 2022-5-29 19:20

马黑黑 发表于 2022-5-29 19:09
我这里图片一直加载不出来

有点遗憾老师看不见！

马黑黑 发表于 2022-5-29 19:39

醉美水芙蓉 发表于 2022-5-29 19:20
有点遗憾老师看不见！

还好，能看见两根体温针的{:4_170:}

查看完整版本: 学习镜像反射