起个网名好难 发表于 2024-6-9 10:14

穿越的古典美女


<meta name="referrer" content="never" />
<style>
#oBlk        {
        --w:720px;--h:960px;
        width:var(--w);height:var(--h);
        margin-left:calc(50% - 0.5 * var(--w));
        overflow:hidden;
        position:relative;
        border-radius:32px;
        box-shadow:4px 4px 10px black;
        background-color:hsla(60, 50% , 80%, .4);
        & img        {
                width:var(--w);height:var(--h);opacity:0;
                position:absolute;left:0px;top:0px;
                -webkit-mask-image: radial-gradient(black 20%, transparent 90%);
                -webkit-mask-size: cover;z-index:1;
        }
}
</style>
<div id="oBlk">
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDH9lOib2nLNSRt8ukJTKx7pwvMVkrHOcUicfl2mhiajXpMANicuc8lN89xg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDGFnYBic98e0uthRCQZUehLFCgqEsPXFQk8mTLo6RQXibeqsGia3kN7JVw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDOkrnoE8PkWOzPlH3kqSvCoVLHEwmb86nBeZEFNK5Cicx4Vsgu2On43g/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDhvCWAzzQOSicb5Wz5Hicw5wLO6pLfdFOkiaJBtNTtSSQtYR701NKlwCXw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDAm9twwRSldyMHia26HLxU0vV9qzaTtRxO6LQtGdCKgxuiad229c1cCzw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDXltD3dEBlZPO0oudJdAwupRTHrLWEuvLXch3aWILrWkC05g6h4Awdg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDKicOnsoNHlqTibkfeDAeR47umnLTpnJAN9JtttJAPcD4m1xCCib1S37Zg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDcMlzAn0ffB1ibDBiaRqaAmAiaib6IvicaLr0xnJLXKibZGQA5N8clDBUL4Fg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDav8DzxwDGn8iaORe3t463qsWJefcf2bMKh8MKLnIz55VppKUzgBG4ibw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDd7y1WyTYB2xn2zRzbZAB9IeTVoCoUB2ORCSCwqvWHtfsGpfibzethBA/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDH1FAEqmTFibyG9zOR5g9UUiakM5ianvhDrL8TEGJhmViaGOPeXW5wT3UtQ/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDj9EKugCSfBL2G5rdbdibu6K2icwylUs4kvvUea5df4EkQeialbVocDwiaw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLD8K9DRFeHiaoUFIvUAnty2kicgvKiaia1icW2HPfj6Srav4gbEV75bXibSJaA/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDXroBxN6FX4wiaVGhDo5cTfSiao8Ex3mfwKibxvH73ZhaBwdEjlyqjUsiaA/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDSGX3M0msPaMDzpsVHbSia963OOIPhLA1xu8EuBp9KiaKIzy35KJoHyNA/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDtiaB7ySvAQbb7Kjb0ckbfUoJy1Zrh5kqFJrK2H60sV5vZ3UXkvGrwaA/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDpPpoKLownS2yjl3JHWX74uIC9X0WVOVHMiauicN4W0Oic3So6uic1VrhHg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDYPkWibV2ozh8UjklJS0DHaqALM5FeKlYXN2dp7gwc4yWuoWicxqj03icg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDicfV2e9NLhGfD8zRWgWcgicD0jMKq8vExESTDmn6g6z6jVSKJjia8SYrg/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDpAzrw3Bubmf71HuuaPcJlATrFY3UEtOdVvxOQ3lg7XzficbF7F43cRw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDXkzstD9JINuqtSkqc34U8hpUqb4TMR393QRqPBbUibcG6yT9lk2xa6w/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDaySiaKZWo0JUsESia3PLR3pMlHXpaAmbMgq6QhMUzZtoN1KrYboX8bnw/640" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SxPQbPVWze4RicB9KBRibtLDd8BiadDRhEZoK3DyMkx180Gm01HiaWR26bIkF36KKEZib7FplBia51pSNw/640" />
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1854977500.mp3" loop autoplay />
<script>
{
let keyFrames = [
        [
                {offset: 0.0, opacity:0,transform:'scale(0.3)'},
                {offset: 0.5, opacity:1,transform:'scale(1.05)'},
                {offset: 0.7, opacity:1,transform:'scale(0.9)'},
                {offset: 1.0, opacity:1,transform:'scale(1)'}
        ],
        [
                {offset: 0.0, transform:'scale(1)'},
                {offset: 0.25,transform:'scale(0.95)'},
                {offset: 0.75,transform:'scale(1.1)'},
                {offset: 1.0, opacity:0,transform:'scale(0.3)'}
        ]
];
let EffectTiming = [
        {
                duration: 3000,
                iterations: 1,
                delay: 0,
                fill: 'forwards'
        },
        {
                duration: 2000,
                iterations: 1,
                delay: 5000,
                fill: 'forwards'
        }
];

let imgSet = document.querySelectorAll('#oBlk > img'), aniObj;
let Idx = 0;
let aniObjs = ;


(function chg_cur_pic() {
        for(let i = 0; i < keyFrames.length; i++)        {
                if(aniObjs)         aniObjs.cancel();
                aniObjs = imgSet.animate(keyFrames, EffectTiming);
        }
    aniObjs.onfinish = chg_cur_pic;
        Idx++; Idx %= imgSet.length;
})();

}
</script>

梦江南 发表于 2024-6-9 11:28

欣赏老师的精美代码音画！{:4_199:}

梦江南 发表于 2024-6-9 11:31

老师对国画情有独钟，帖子都来源于国画。

起个网名好难 发表于 2024-6-9 12:00

梦江南 发表于 2024-6-9 11:28
欣赏老师的精美代码音画！

谢谢支持欣赏！

https://n.sinaimg.cn/sinacn10/405/w277h128/20180325/6690-fysnevm8574879.gif

起个网名好难 发表于 2024-6-9 12:01

梦江南 发表于 2024-6-9 11:31
老师对国画情有独钟，帖子都来源于国画。

不清楚是什么风格的图片只觉得有点意思{:5_117:}

小文 发表于 2024-6-9 12:15

风趣

起个网名好难 发表于 2024-6-9 12:31

小文 发表于 2024-6-9 12:15
风趣

谢谢欣赏支持！

https://n.sinaimg.cn/sinacn10/405/w277h128/20180325/6690-fysnevm8574879.gif

红影 发表于 2024-6-9 13:08

哈哈，看得笑喷，现代设施和古装的结合。让古装仕女乘坐地铁高铁和玩手机，咋那么好玩呢{:4_170:}

红影 发表于 2024-6-9 13:08

这个特别有趣，亮起来，让大家一起笑笑{:4_189:}

起个网名好难 发表于 2024-6-9 15:34

红影 发表于 2024-6-9 13:08
哈哈，看得笑喷，现代设施和古装的结合。让古装仕女乘坐地铁高铁和玩手机，咋那么好玩呢

逛超市， 玩滑板…………{:5_106:}

起个网名好难 发表于 2024-6-9 15:35

红影 发表于 2024-6-9 13:08
这个特别有趣，亮起来，让大家一起笑笑

确实是脑洞大开啊{:5_117:}

红影 发表于 2024-6-9 19:09

起个网名好难 发表于 2024-6-9 15:34
逛超市， 玩滑板…………

是啊，让古代美女学会滑板，真的想不到呢{:4_189:}

红影 发表于 2024-6-9 19:10

起个网名好难 发表于 2024-6-9 15:35
确实是脑洞大开啊

做图的人真会玩{:4_170:}

起个网名好难 发表于 2024-6-9 19:17

红影 发表于 2024-6-9 19:09
是啊，让古代美女学会滑板，真的想不到呢

吸尘器也用上了{:5_106:}

起个网名好难 发表于 2024-6-9 19:17

红影 发表于 2024-6-9 19:10
做图的人真会玩

不得不佩服啊{:5_117:}

樵歌 发表于 2024-6-9 20:57

特别好玩，不知道提古典美女穿越回来，还是现代穿古装。{:4_189:}

起个网名好难 发表于 2024-6-9 21:09

樵歌 发表于 2024-6-9 20:57
特别好玩，不知道提古典美女穿越回来，还是现代穿古装。

一般穿越文都是现代穿越到从前，少有从前穿越到现在的。

红影 发表于 2024-6-9 21:21

起个网名好难 发表于 2024-6-9 19:17
吸尘器也用上了

还用上了手机，知道了上网{:4_173:}

红影 发表于 2024-6-9 21:22

起个网名好难 发表于 2024-6-9 19:17
不得不佩服啊

脑洞开得很大{:4_189:}

起个网名好难 发表于 2024-6-9 21:34

红影 发表于 2024-6-9 21:21
还用上了手机，知道了上网

与时俱进{:5_117:}
页: [1] 2
查看完整版本: 穿越的古典美女