论坛 › 动画音画 › 4扇屏风

亚伦影音工作室 发表于 2026-8-27 09:17

4扇屏风

本帖最后由 亚伦影音工作室 于 2026-8-27 09:54 编辑 <br /><br /><style>
.fold-image{position: relative; margin: 50px 0 10px calc(10% - 90px);
width:800px;z-index: 4;
height: 450px;
display: flex;--state: paused;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8));
}

.fold-image span{
width: 25%;
height: 100%;
background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/02fedbbac83dda179428c3369e006e46.jpg)no-repeat center/cover;
box-shadow: inset 1px 0 1px rgba(0,0,0,0.6);animation: rot 10s linear infinite var(--state);filter: drop-shadow(2px 0px 2px rgba(0,0,0,0.8));
}

.fold-image:hover {
      transform: rotateY(180deg);
    }

.fold-image span:nth-child(odd){
transform: skewY(-14deg);
}

.fold-image span:nth-child(even){
transform: skewY(14deg);
}
@keyframes rot {
50%{transform: skewY(0deg);}
}
.fold-image span:first-child{
background-position: 0;
}
.fold-image span:nth-child(2){
background-position: -200px;
}
.fold-image span:nth-child(3){
background-position: -400px;
}
.fold-image span:last-child{
background-position: -600px;
}
</style>'
<style>
#box {width: 400px;   position: relative;top: -400px;left:120px;z-index: 4;background:url(https://pic1.imgdb.cn/i/034BPTtRR0VHPEJOPN358x.png)no-repeat center/cover;
        height: 400px;animation: round 0.5s linear infinite ;}

@keyframes round {0% {transform:rotate(0deg)scale(0.2)translate(0%,0%)rotateY(0deg)rotateX(0deg);filter:hue-rotate(360deg);
opacity:1}
50% {transform:rotate(0deg)scale(1)translate(0%,0%)rotateY(0deg)rotateX(0deg);filter:hue-rotate(0deg);
opacity:1}
100%{transform:rotate(0deg)scale(2)translate(0%,0%)rotateY(0deg)rotateX(0deg);filter:hue-rotate(360deg);
opacity:0}
}

</style>
<div class="fold-image" id="foldimage">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="box"></div>
<style>
#pBlk        {width:500px;height:200px;margin:-400px 100px;position: absolute;text-align:center;z-index: 4;}
#dprg        {width:100%;appearance: none;height:8px; overflow:hidden; border-radius: 4px;position:relative;margin-bottom:16px;margin-top:16px;}
#dprg::-webkit-progress-value        {background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#dprg::-webkit-progress-bar        {background:linear-gradient(45deg, red, yellow, green, purple, blue);}
#incBlk        {width:14px;height:14px;overflow:hidden;border-radius:50px;background-color:brown;position:absolute; }
#curpos {color: #f00;position: relative; }
#endpos {color: #00f;position: relative;}
#perTxt {width: 100px;height: 6px;font-size: 12px;line-height: 10px;left: 0;position: relative;margin: 2px auto;}
</style>
<div id="pBlk">
        <span id="curpos">00:00</span> / <span id="endpos">00:00</span>
        <div id="perTxt">0%</div>
        <progress id="dprg" value='0' max="100" ></progress>
        <div id="incBlk"></div>
        <button id="ctrlBtn" >暂停</button>
</div>
<audio id="aud" src="https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac" loop autoplay></audio>
<script>
incBlk.style.top = (dprg.offsetTop - (incBlk.offsetHeight - dprg.offsetHeight) / 2) + 'px';
incBlk.style.left = -0.5 * incBlk.clientWidth + 'px';
const pblkWidth = pBlk.offsetWidth
const initIndicatorLeft = incBlk.offsetLeft;
        aud.addEventListener("timeupdate", () => {
                dprg.value = parseFloat((aud.currentTime / aud.duration) * 100);
                perTxt.innerText = (dprg.value.toFixed(2)) + "%"
               
                incBlk.style.left = (aud.currentTime / aud.duration * pblkWidth + initIndicatorLeft) + 'px';
               
                endpos.innerHTML = formatTime(aud.duration)
                curpos.innerHTML = formatTime(aud.currentTime)
        })
//时间       

        const formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
//
dprg.onclick = (e) =>         {
        let curval = (e.x - pBlk.offsetLeft);
        aud.currentTime = (curval / pblkWidth * dprg.max * aud.duration / 100);
}

(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {foldimage.style.setProperty('--state', aud.paused ? 'paused' : 'running');
         vids.forEach(vid => aud.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play()) );
      };
aud.onplaying = aud.onpause = () => mState();
ctrlBtn.onclick = () => {
        aud.paused ? (ctrlBtn.innerHTML = '暂停' , aud.play()) : (ctrlBtn.innerHTML = '播放' , aud.pause());
        }
})();

</script>

红影 发表于 2026-8-27 16:24

这个制作很奇妙，由错位四扇屏风回复原本的画面，这歌曲貌似也是原歌词的AI制作。
欣赏亚伦老师好帖{:4_199:}

魏淑芬 发表于 2026-8-27 17:10

鼠标划过也有变化哦{:4_181:}

杨帆 发表于 2026-8-28 13:52

奇妙的构思，美妙的效果，谢谢亚伦老师精彩示范{:4_190:}

小九 发表于 2026-8-31 11:46

不在同一个水平上，屏风的折叠处很有立体感觉，欣赏了。{:4_187:}

查看完整版本: 4扇屏风