马黑黑 发表于 2022-6-30 20:22

卷珠帘（箫版）

<style>
.papa { left: -214px; width: 1024px; height: 600px; background: purple url('https://638183.freep.cn/638183/Pic/2022/jzl2.jpg') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://638183.freep.cn/638183/Pic/2022/jzlcover.jpg')no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://638183.freep.cn/638183/Pic/2022/jzlcover.jpg')no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0%</span>
                </p>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1817963420.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0;
let lrcAr = [
        ['0.00','卷珠帘 - 纯音乐'],
        ['2: 20','原唱 & 作曲 : 霍尊'],
        ['2.20','演奏 - 呼和'],
        ['222.27','歌词n']
]

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

绿叶清舟 发表于 2022-6-30 20:26

这个效果好啊，又能做开门见山了{:4_189:}

千羽 发表于 2022-6-30 20:29

漂亮的珠帘{:4_187:}

马黑黑 发表于 2022-6-30 20:29

珠帘开合实现技法：

珠帘用帖子父框的伪元素加载，::before 和 ::after 使用同一张图片，各占父框50%的位置。伪元素的伪类选择器，:hover，分别加入动画：

.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }

一个向左移动，一个向右移动，100%表示移动全部。它们在 2 秒钟内完成，时间定义在伪元素统一样式中（红色部分）：

.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }

上面的红色代码，all 是重要的关键词，它确保鼠标离开帖子界面时动画以相同的时间和步幅返回。

马黑黑 发表于 2022-6-30 20:30

全帖代码分享：
<style>
.papa { left: -214px; width: 1024px; height: 600px; background: purple url('https://638183.freep.cn/638183/Pic/2022/jzl2.jpg') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://638183.freep.cn/638183/Pic/2022/jzlcover.jpg')no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://638183.freep.cn/638183/Pic/2022/jzlcover.jpg')no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0%</span>
                </p>
        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1817963420.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
        ['0.00','卷珠帘 - 纯音乐'],
        ['2: 20','原唱 & 作曲 : 霍尊'],
        ['2.20','演奏 - 呼和'],
        ['222.27','歌词n']
]

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

千羽 发表于 2022-6-30 20:30

卷起后想看到那在思念的美女……{:4_203:}

马黑黑 发表于 2022-6-30 20:31

千羽 发表于 2022-6-30 20:30
卷起后想看到那在思念的美女……

美女害羞，躲在内房

马黑黑 发表于 2022-6-30 20:31

绿叶清舟 发表于 2022-6-30 20:26
这个效果好啊，又能做开门见山了

可以的吧

千羽 发表于 2022-6-30 20:33

马黑黑 发表于 2022-6-30 20:31
美女害羞，躲在内房

去劝一下{:4_173:}

马黑黑 发表于 2022-6-30 20:33

千羽 发表于 2022-6-30 20:33
去劝一下

劝人的事不是我的长项

千羽 发表于 2022-6-30 20:34

是黑黑老师没给她留一席之地{:4_203:}

马黑黑 发表于 2022-6-30 20:35

千羽 发表于 2022-6-30 20:34
是黑黑老师没给她留一席之地

哪有呀？红影说俺懂怜香惜玉的

千羽 发表于 2022-6-30 20:38

马黑黑 发表于 2022-6-30 20:35
哪有呀？红影说俺懂怜香惜玉的

没看出来{:4_181:}

马黑黑 发表于 2022-6-30 20:38

千羽 发表于 2022-6-30 20:38
没看出来

慢慢看，不眨眼看5秒钟，就能看出来

绿叶清舟 发表于 2022-6-30 20:39

马黑黑 发表于 2022-6-30 20:31
可以的吧

以前的整了个动图的

马黑黑 发表于 2022-6-30 20:43

绿叶清舟 发表于 2022-6-30 20:39
以前的整了个动图的

GIF？

红影 发表于 2022-6-30 20:44

这个有趣，真的像打开了两扇门似的{:4_173:}

绿叶清舟 发表于 2022-6-30 20:52

马黑黑 发表于 2022-6-30 20:43
GIF？

是啊，做了个对开的门了

千羽 发表于 2022-6-30 20:52

马黑黑 发表于 2022-6-30 20:38
慢慢看，不眨眼看5秒钟，就能看出来

黑黑老师先看哈，示范下{:4_173:}

醉美水芙蓉 发表于 2022-6-30 20:52

页: [1] 2 3
查看完整版本: 卷珠帘（箫版）