马黑黑 发表于 2022-5-17 21:09

孔雀舞

本帖最后由 马黑黑 于 2022-5-17 21:18 编辑 <br /><br /><style>
.outerbox {
        position: relative;
        left: -242px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1080px;
        height: 666px;
        background: #888 url('https://638183.freep.cn/638183/t22/51/peacock.jpg') no-repeat center/cover;;
        box-shadow: 2px 2px 8px rgba(0,0,0,.95);
        perspective: 3000px;
}
.innerbox {
        background: #666;
        box-shadow: 2px 2px 6px rgba(0,0,0,.85);
        transform-style: preserve-3d;
        animation: flyout 6s linear infinite alternate;
}
@keyframes flyout {
        0% { transform: rotate(0turn); width: 1px; height: 1px; }
        80%, 100% { transform: rotate(2turn); width: 600px; height: 600px; }
}
</style>

<div class="outerbox">
        <div class="innerbox"></div>
</div>

<script>

let picAr = Array.from({length:13}, (v,k) => k + 1);
let idx = 0;
let outer = document.querySelector('.outerbox');
let inner = document.querySelector('.innerbox');
let aud = document.createElement('iframe');
aud.src = 'https://music.163.com/outchain/player?type=2&id=1840766699&auto=1&height=66';
aud.style.display = 'none';
setBgImg();
outer.appendChild(aud);
setInterval(setBgImg, 12000);

function setBgImg(){
        if(idx >= picAr.length) idx = 0;
        inner.style = `background: url('https://638183.freep.cn/638183/t22/51/${picAr}.jpg') no-repeat center/cover`;
        idx += 1;
}

</script>

加林森 发表于 2022-5-17 21:12

杨丽萍的孔雀舞吧。老黑这个制作又换另外一种了啊。{:4_199:}

朵拉 发表于 2022-5-17 21:12

运用旋转变换图片，好创意{:4_190:}

马黑黑 发表于 2022-5-17 21:13

朵拉 发表于 2022-5-17 21:12
运用旋转变换图片，好创意

音乐没出来？

醉美水芙蓉 发表于 2022-5-17 21:13

加林森 发表于 2022-5-17 21:15

马黑黑 发表于 2022-5-17 21:13
音乐没出来？

没有听见音乐。

加林森 发表于 2022-5-17 21:17

老黑在变魔术啊，一转就是另外一张图片。厉害啊。{:4_199:}

马黑黑 发表于 2022-5-17 21:17

加林森 发表于 2022-5-17 21:15
没有听见音乐。

很怪哈。我复制这里到本地测试没问题。我看看。

大猫咪 发表于 2022-5-17 21:17

老黑真棒{:4_187:}{:4_190:}

加林森 发表于 2022-5-17 21:19

马黑黑 发表于 2022-5-17 21:17
很怪哈。我复制这里到本地测试没问题。我看看。

现在有音乐了，这个应该也是黑洞原理吧。

马黑黑 发表于 2022-5-17 21:21

加林森 发表于 2022-5-17 21:12
杨丽萍的孔雀舞吧。老黑这个制作又换另外一种了啊。

有老杨的，也有别的

马黑黑 发表于 2022-5-17 21:21

大猫咪 发表于 2022-5-17 21:17
老黑真棒

是孔雀舞棒，老杨棒

马黑黑 发表于 2022-5-17 21:21

加林森 发表于 2022-5-17 21:17
老黑在变魔术啊，一转就是另外一张图片。厉害啊。

理论上有多少图都可以

加林森 发表于 2022-5-17 21:22

转五圈出来一张图片，转回去也是五，这个有规律的吧。

马黑黑 发表于 2022-5-17 21:22

醉美水芙蓉 发表于 2022-5-17 21:13
黑黑老师这个特效真漂亮！

还行吧？比你的差远了

加林森 发表于 2022-5-17 21:23

马黑黑 发表于 2022-5-17 21:21
理论上有多少图都可以

嗯嗯，有点明白了。

加林森 发表于 2022-5-17 21:23

马黑黑 发表于 2022-5-17 21:21
有老杨的，也有别的

是的，看见了。

大猫咪 发表于 2022-5-17 21:24

马黑黑 发表于 2022-5-17 21:21
是孔雀舞棒，老杨棒

老黑也棒{:4_187:}

马黑黑 发表于 2022-5-17 21:51

大猫咪 发表于 2022-5-17 21:24
老黑也棒

我一般般

马黑黑 发表于 2022-5-17 21:51

加林森 发表于 2022-5-17 21:23
是的，看见了。

眼尖
页: [1] 2 3
查看完整版本: 孔雀舞