小辣椒 发表于 2022-5-18 13:19

永不失联的爱---学习黑黑的孔雀舞效果

<style>
.outerbox {
        position: relative;
        left: -340px;
                top:150px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1280px;
        height: 720px;
        background: #888 url('https://wj.zp68.com/lxx/yunhua/2022/05/17/1280.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=523250334&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://wj.zp68.com/lxx/yunhua/2022/05/17/${picAr}.jpg') no-repeat center/cover`;
        idx += 1;
}

</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-5-18 13:20

成功了好开心的@马黑黑

小辣椒 发表于 2022-5-18 13:21

这么多图片难找，网上搜索了情侣装{:4_172:}

马黑黑 发表于 2022-5-18 13:24

情侣装很给力{:4_187:}

小辣椒 发表于 2022-5-18 13:27

马黑黑 发表于 2022-5-18 13:24
情侣装很给力
谢谢黑黑的教程，这个图图我改大了一点，开始不敢改大尺寸，怕不成功

红芍药 发表于 2022-5-18 13:31

我有点晕这动态的。{:4_189:}

小辣椒 发表于 2022-5-18 13:33

红芍药 发表于 2022-5-18 13:31
我有点晕这动态的。

{:4_172:}

加林森 发表于 2022-5-18 13:35

漂亮的制作，真美！{:4_199:}

大猫咪 发表于 2022-5-18 13:54

辣椒真棒！学习得真快，制作真漂亮！赞！中午好{:4_204:}{:4_179:}

梦油 发表于 2022-5-18 14:55

本帖最后由 梦油 于 2022-5-20 10:43 编辑

小辣椒朋友下午好！你这个图设计得好浪漫哦！

红影 发表于 2022-5-18 15:32

这个帖子好温柔的样子，那么多甜甜蜜蜜的镜头{:4_187:}

红影 发表于 2022-5-18 15:34

这个背景选得好，这个旋转图图适合留出些空挡的，太繁琐的背景肯定效果不好{:4_187:}

马黑黑 发表于 2022-5-18 17:12

小辣椒 发表于 2022-5-18 13:27
谢谢黑黑的教程，这个图图我改大了一点，开始不敢改大尺寸，怕不成功

CSS里的尺寸操作不是很复杂，能看懂的就能修改

朵拉 发表于 2022-5-18 17:51

漂亮 欣赏学习{:4_204:}

醉美水芙蓉 发表于 2022-5-18 21:19

闲言不语 发表于 2022-5-18 21:32

好多靓丽男女！{:4_199:}

小辣椒 发表于 2022-5-19 21:05

加林森 发表于 2022-5-18 13:35
漂亮的制作，真美！

队长晚上好{:4_187:}

小辣椒 发表于 2022-5-19 21:13

大猫咪 发表于 2022-5-18 13:54
辣椒真棒！学习得真快，制作真漂亮！赞！中午好

猫猫好，其实这些猫猫都会做的，我就套用了黑黑的代码

小辣椒 发表于 2022-5-19 21:14

梦油 发表于 2022-5-18 14:55
小辣椒朋友下午好！你这个图是挤得好浪漫哦！

问好梦油，谢谢欣赏{:4_187:}

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

小辣椒 发表于 2022-5-19 21:05
队长晚上好

小辣椒晚上好！{:4_204:}
页: [1] 2
查看完整版本: 永不失联的爱---学习黑黑的孔雀舞效果