马黑黑 发表于 2022-5-28 11:19

约束

本帖最后由 马黑黑 于 2022-5-28 11:35 编辑 <br /><br /><style>
.myBox {
        left: -302px;
        width: 1200px;
        height: 600px;
        box-shadow: 2px 2px 4px gray;
        position: relative;
}
.reflect {
        width: 600px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t22/51/table1.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=33469760.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>

加林森 发表于 2022-5-28 12:14

老黑这个制作很有立体感的，真漂亮。坐下喝茶。。。。。{:4_180:}

红影 发表于 2022-5-28 12:15

右边的世界就是镜射出来的吧，为什么连进度条也能镜像呢？

马黑黑 发表于 2022-5-28 12:17

红影 发表于 2022-5-28 12:15
右边的世界就是镜射出来的吧，为什么连进度条也能镜像呢？

镜像的母元素里面的元素都会被反射镜像

马黑黑 发表于 2022-5-28 12:18

加林森 发表于 2022-5-28 12:14
老黑这个制作很有立体感的，真漂亮。坐下喝茶。。。。。

看出道道来木有

红影 发表于 2022-5-28 12:18

像个新开张的茶室，小店新开，欢迎光临{:4_173:}

红影 发表于 2022-5-28 12:20

马黑黑 发表于 2022-5-28 12:17
镜像的母元素里面的元素都会被反射镜像

有意思。以后不用去找大图了，小图镜射一下就成大图了{:4_173:}

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

看到你说动图也能镜像，那弄一只鹰，岂不是相向而飞了{:4_173:}

加林森 发表于 2022-5-28 12:28

马黑黑 发表于 2022-5-28 12:18
看出道道来木有

半张图片变成了一张有立体感的图片了。应该是这个吧！

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

加林森 发表于 2022-5-28 12:28
半张图片变成了一张有立体感的图片了。应该是这个吧！

镜像反射，一张图片将自己的镜像反射出去

马黑黑 发表于 2022-5-28 12:46

红影 发表于 2022-5-28 12:18
像个新开张的茶室，小店新开，欢迎光临

这个想象有点意思

马黑黑 发表于 2022-5-28 12:46

红影 发表于 2022-5-28 12:22
看到你说动图也能镜像，那弄一只鹰，岂不是相向而飞了

也可以弄成相背而行

马黑黑 发表于 2022-5-28 12:47

红影 发表于 2022-5-28 12:20
有意思。以后不用去找大图了，小图镜射一下就成大图了

图片也要合适才行

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

马黑黑 发表于 2022-5-28 12:45
镜像反射，一张图片将自己的镜像反射出去

嗯嗯。

醉美水芙蓉 发表于 2022-5-28 16:42

醉美水芙蓉 发表于 2022-5-28 16:44

马黑黑 发表于 2022-5-28 17:25

醉美水芙蓉 发表于 2022-5-28 16:44
黑黑老师这个图片的尺寸肯定有要求的吧！

也没啥要求。帖子外框是图片的两倍即可。

东篱闲人 发表于 2022-5-28 18:59

赶紧上菜。。。

马黑黑 发表于 2022-5-28 19:18

东篱闲人 发表于 2022-5-28 18:59
赶紧上菜。。。

这是茶馆

东篱闲人 发表于 2022-5-28 19:50

马黑黑 发表于 2022-5-28 19:18
这是茶馆

看来喝点是喝不成了。。。{:5_117:}
页: [1] 2
查看完整版本: 约束