马黑黑 发表于 2023-4-9 10:39

梦中的婚礼

本帖最后由 马黑黑 于 2023-4-9 10:43 编辑 <br /><br /><style>
#papa {--state: paused;margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;border: 1px solid tan;border-image: linear-gradient(35deg,blue,orange,magenta,green,red) 2;background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;box-shadow: 2px 4px 10px #000;cursor: pointer;overflow: hidden;display: flex;place-items: center;perspective: 4px;perspective-origin: 600px 118px;animation: hue 28s infinite linear var(--state);position: relative;}
.deck{position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;animation: move 12s infinite linear var(--state);}
.deck:nth-child(2){animation-delay: -4s;}
.item {position: absolute;width: 100%;height: 100%;background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;background-size: cover;opacity: .6;animation: fade 12s infinite linear var(--state);}
.deck:nth-child(2) .item {animation-delay: -4s;}
.item-right {transform: rotateY(90deg) translateZ(500px);}
.item-left {transform: rotateY(-90deg) translateZ(500px);}
.item-top {transform: rotateX(90deg) translateZ(500px);}
.item-bottom {transform: rotateX(-90deg) translateZ(500px);}
.item-middle {transform: rotateX(180deg) translateZ(1000px);}
@keyframes move {0%{ transform: translateZ(-500px) rotate(0deg); }100%{ transform: translateZ(500px) rotate(360deg); }}
@keyframes fade {0%{ opacity: 0; }25%, 60%{ opacity: .6; }100%{ opacity: 0; }}
@keyframes hue {0% { filter: hue-rotate(0); }100% { filter: hue-rotate(360deg); }}
</style>

<div id="papa">
        <div class="deck">
                <div class="item item-right"></div>
                <div class="item item-left"></div>       
                <div class="item item-top"></div>
                <div class="item item-bottom"></div>
                <div class="item item-middle"></div>               
        </div>
        <div class="deck">
                <div class="item item-right"></div>
                <div class="item item-left"></div>       
                <div class="item item-top"></div>
                <div class="item item-bottom"></div>       
                <div class="item item-middle"></div>               
        </div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341360" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
})();
</script>

马黑黑 发表于 2023-4-9 10:42

参考代码
<style>
#papa {
        --state: paused;
        margin: 30px auto;
        width: 1024px;
        height: 640px;
        border: 1px solid tan;
        border-image: linear-gradient(35deg,blue,orange,magenta,green,red) 2;
        background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
        box-shadow: 2px 4px 10px #000;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        place-items: center;
        perspective: 4px;
        perspective-origin: 600px 118px;
        animation: hue 28s infinite linear var(--state);
        position: relative;
}

.deck{
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: move 12s infinite linear var(--state);
}

.deck:nth-child(2){
        animation-delay: -4s;
}

.item {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
        background-size: cover;
        opacity: .6;
        animation: fade 12s infinite linear var(--state);
}

.deck:nth-child(2) .item {
        animation-delay: -4s;
}

.item-right {
        transform: rotateY(90deg) translateZ(500px);
}

.item-left {
        transform: rotateY(-90deg) translateZ(500px);
}

.item-top {
        transform: rotateX(90deg) translateZ(500px);
}

.item-bottom {
        transform: rotateX(-90deg) translateZ(500px);
}

.item-middle {
        transform: rotateX(180deg) translateZ(1000px);
}

@keyframes move {
        0%{ transform: translateZ(-500px) rotate(0deg); }
        100%{ transform: translateZ(500px) rotate(360deg); }
}

@keyframes fade {
        0%{ opacity: 0; }
        25%, 60%{ opacity: .6; }
        100%{ opacity: 0; }
}

@keyframes hue {
        0% { filter: hue-rotate(0); }
        100% { filter: hue-rotate(360deg); }
}
</style>

<div id="papa">
        <div class="deck">
                <div class="item item-right"></div>
                <div class="item item-left"></div>       
                <div class="item item-top"></div>
                <div class="item item-bottom"></div>
                <div class="item item-middle"></div>               
        </div>
        <div class="deck">
                <div class="item item-right"></div>
                <div class="item item-left"></div>       
                <div class="item item-top"></div>
                <div class="item item-bottom"></div>       
                <div class="item item-middle"></div>               
        </div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341360" autoplay="autoplay" loop="loop"></audio>

<script>
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

庶民 发表于 2023-4-9 10:57

做梦娶媳妇

马黑黑 发表于 2023-4-9 11:01

庶民 发表于 2023-4-9 10:57
做梦娶媳妇

{:4_181:}

红影 发表于 2023-4-9 11:39

黑黑又一个新效果，给新娘子头上加了那么大的效果，让美人如梦里看花啊{:4_173:}

马黑黑 发表于 2023-4-9 12:16

红影 发表于 2023-4-9 11:39
黑黑又一个新效果，给新娘子头上加了那么大的效果，让美人如梦里看花啊

差不多吧{:5_106:}

上海朝阳 发表于 2023-4-9 12:28

玄迷，这太美了

马黑黑 发表于 2023-4-9 12:39

上海朝阳 发表于 2023-4-9 12:28
玄迷，这太美了

中午好

雨中悄然 发表于 2023-4-9 14:13

这是用原图做的发{:4_199:}散特效

梦缘 发表于 2023-4-9 16:35

皇冠的光辉，很有趣，欣赏问好！{:4_190:}

马黑黑 发表于 2023-4-9 16:48

梦缘 发表于 2023-4-9 16:35
皇冠的光辉，很有趣，欣赏问好！

下午好

樵歌 发表于 2023-4-9 18:53

终于见到 黑黑娘子了，虽然雾里看花，但真美呵。祝福你{:4_176:}

马黑黑 发表于 2023-4-9 18:58

樵歌 发表于 2023-4-9 18:53
终于见到 黑黑娘子了，虽然雾里看花，但真美呵。祝福你

谢谢

马黑黑 发表于 2023-4-9 18:59

雨中悄然 发表于 2023-4-9 14:13
这是用原图做的发散特效

这门道你看出来了，眼光犀利

樵歌 发表于 2023-4-9 19:23

马黑黑 发表于 2023-4-9 18:58
谢谢

这是补办的婚礼么，怎么说也得请几桌客呗{:4_189:}

马黑黑 发表于 2023-4-9 19:29

樵歌 发表于 2023-4-9 19:23
这是补办的婚礼么，怎么说也得请几桌客呗

现在早已不兴这个了

小辣椒 发表于 2023-4-9 19:59

黑黑这个同一个图图可以做出这个万丈光芒的效果，{:4_177:}

小辣椒 发表于 2023-4-9 20:00

我先去自己试一下效果再回来{:4_170:}

红影 发表于 2023-4-9 20:03

马黑黑 发表于 2023-4-9 12:16
差不多吧

那么多的动态效果，倒还都协调一致{:4_173:}

小辣椒 发表于 2023-4-9 20:12

这个效果不错，我用了各种图图测试，出来的效果不一样的
页: [1] 2 3 4 5
查看完整版本: 梦中的婚礼