论坛首页 › 单图音画 › 你是人间最美的景色

醉美水芙蓉 发表于 2024-6-15 21:03:58

你是人间最美的景色

<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: lightblue; box-shadow: 3px 3px 6px rgba(0,0,0,.6); overflow: hidden; user-select: none; z-index: 1; perspective: 2000px; position: relative; }
#picbox { position: absolute; opacity: .8; border-radius: 20px; transform-style: preserve-3d; cursor: pointer; }


.vid { position: absolute; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.vid:nth-of-type(1) { position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; pointer-events: none;}
.vid:nth-of-type(2) { position: absolute;top:0px; width: 61%; height:60%; right:-120px;object-fit: cover; pointer-events: none; mix-blend-mode: screen;opacity: .95;}

#aCanv { position: absolute; bottom: 30px; right: 160px; opacity: .5; transform: scale(0.6, 0.6);transform: rotate(21deg);}

@keyframes rot { to { transform: rotate(360deg); } }

</style>

<div id="tz">
        <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6ae8dfb7614317e6f5ba846ec5554fe9_preview.mp4" autoplay loop disablePictureInPicture muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
        <audio id="aud" src="https://cccimg.com/view.php/a814e3dc5bec0d94b99d3ab9d9f50e98.mp3" autoplay loop></audio>
        <img id="picbox" src="https://638183.freep.cn/638183/small/hxxb.webp" alt="" />
        <canvas id="aCanv" width="520" height="520"></canvas>
</div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
//播放器颜色设置
//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };
//歌词
var lrcAr= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
(function() {
       const pics = [
    'https://pic.imgdb.cn/item/666d7d16d9c307b7e92a9626.png',
    'https://pic.imgdb.cn/item/666d7d16d9c307b7e92a96a6.png',
    'https://pic.imgdb.cn/item/666d7d12d9c307b7e92a90ba.png',
    'https://pic.imgdb.cn/item/666d7d20d9c307b7e92aab80.png',
    'https://pic.imgdb.cn/item/666d7d20d9c307b7e92aabc3.png',
'https://pic.imgdb.cn/item/666d7d20d9c307b7e92aab5a.png',
'https://pic.imgdb.cn/item/666d7d62d9c307b7e92b2932.png',
'https://pic.imgdb.cn/item/666d7d62d9c307b7e92b2952.png',
'https://pic.imgdb.cn/item/666d7d62d9c307b7e92b2909.png',
];
        let ani, ar = [];
        const loadImages = async urls => {
                const promises = [];
                for (let url of urls) {
                        promises.push(new Promise(resolve => {
                                const img = new Image();
                                img.onload = () => {
                                        ar.push([`${img.src}`, `${img.naturalWidth}`, `${img.naturalHeight}`]);
                                        resolve();
                                };
                                img.src = url;
                        }));
                }
                await Promise.all(promises);
                showPic();
        };
        const showPic = () => {
                let idx = Math.floor(Math.random() * pics.length);
                let w1 = tz.offsetWidth, h1 = tz.offsetHeight, w2 = ar, h2 = ar;
                let x = Math.random() > 0.1 ? w1 : -w1, y = Math.random() > 0.5 ? h1 : -h2;
                picbox.src = ar;
                const kfs = [
                        {left: `${x}px`, top: `${y}px`},
                        {left: `${(w1 - w2) / 3}px`, top: `${(h1 - h2) / 2}px`, transform: `rotateY(0)`, offset: 0.1},
                        {transform: `rotateY(-15deg)`},
                        {transform: `rotateY(0)`},
                        {transform: `scale(1.2)`},
                        {transform: `scale(0.8)`},
                        {transform: `rotateY(1deg)`},
                        {left: `${(w1 - w2) / 2}px`, top: `${(h1 - h2) / 2}px`, transform: `rotateY(0)`, offset: 0.9},
                        {left: `${x}px`, top: `${y}px`, transform: `rotateZ(0deg) scale(0)`},
                ];
                ani = picbox.animate(kfs, 10000);
                ani.onfinish = () => showPic();
        };
        picbox.onclick = () => aud.paused ? (aud.play(), ani.play()) : (aud.pause(), ani.pause());
        picbox.onmouseover = () => { if(!aud.paused) ani.pause(); };
        picbox.onmouseout = () => { if(!aud.paused) ani.play(); };
        loadImages(pics);
})();
</script>

肖浅 发表于 2024-6-24 08:11:31

这个作品漂亮！！！！

肖浅 发表于 2024-7-20 10:00:59

这个作品漂亮！！！！

肖浅 发表于 2024-7-31 20:56:12

这个作品漂亮！！！！

红尘过客 发表于 2024-8-8 03:39:21

这个作品漂亮！！！！

红尘过客 发表于 2024-8-13 23:49:43

这个作品漂亮！！！！

快播 发表于 2024-8-19 12:34:58

这个作品漂亮！！！！

红尘过客 发表于 2024-8-26 05:56:48

这个作品漂亮！！！！

翁奕童苑 发表于 2024-8-26 21:26:40

这个作品漂亮！！！！

蓝叶 发表于 2024-9-7 09:02:23

这个作品漂亮！！！！

查看完整版本: 你是人间最美的景色