论坛 › 欢乐水吧 › 天地长久（学习黑师《太阳地球月亮》旋转效果）

南无月 发表于 2023-7-17 21:24

天地长久（学习黑师《太阳地球月亮》旋转效果）

<style>#mydiv {
        margin: 0 0 0 calc(50% - 720px);
        width: 1300px;
        height: 768px;
        overflow: hidden;
        background: black;
        box-shadow: 0 0 8px 0 #000;
    position: relative;
}
#pan {
        position: absolute;
        left: 10%;
        bottom:10%;
        width: 60px;
        height: 60px;
        background: snow;
        opacity: .98;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        cursor: pointer;
        z-index: 99;
        transform-origin: 50% 100%;
        animation: dance 1.5s var(--delay) infinite alternate linear var(--state);
        --delay: 0s;
}
#outer {
        margin: auto;
        width: 1200px;
        height: 800px;
        z-index:10;
        position: relative;
}
#outer div {
        position: absolute;
        border-radius: 50%;
}
#sun {
        --x: 50px;
        width: 160px;
        height: 160px;
        left: calc(50% - 80px);
        top: calc(50% - 80px);
        background: url('https://pic.imgdb.cn/item/64b4e2581ddac507cc00a7fc.jpg') no-repeat center/cover;
        box-shadow: 0 0 10px white;
        animation: orbit 40s linear infinite var(--state);
}
#earth {
        --x: 200px;
        width: 50px;
        height: 50px;
        left: calc(50% - 25px);
        top: calc(50% - 25px);
        background: url('https://pic.imgdb.cn/item/64b270681ddac507ccb1feb2.png') no-repeat center/cover;
        animation: orbit 36.5s linear infinite var(--state);
}
#moon {
        --x: 60px;
        width: 20px;
        height: 20px;
        left: calc(50% - 10px);
        top: calc(50% - 10px);
        background: url('https://pic.imgdb.cn/item/64b4e1721ddac507ccfd8988.jpg') no-repeat center/cover;
        animation: orbit 2.7s linear infinite var(--state);
}
#vid {
        position: absolute;
        width: 120%;
        height: 110%;
        top:-10px;
        left:-50px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
}
@keyframes orbit {
    from { transform: rotate(0deg) translateY(var(--x)) rotate(0deg); }
    to { transform: rotate(360deg) translateY(var(--x)) rotate(-360deg); }
}
@keyframes dance {
        from { transform: skew(-15deg); }
        to { transform: skew(15deg);opacity: .1; }
}</style>
<div id="mydiv">
       
        <div id="outer"><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/28/5d1c6e8eb468a.mp4" autoplay="" loop="" muted=""></video>
                <div id="sun">
                        <div id="earth">
                                <div id="moon">
                                </div>
                        </div>
                </div>
        </div>
        <div id="pan">
        </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5259692" autoplay="autoplay" loop="loop"></audio>
<script>let mState = () =>aud.paused ? (mydiv.style.setProperty('--state','paused'), canMove = false, vid.pause()) : (mydiv.style.setProperty('--state','running'), canMove = true, vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
pan.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2023-7-17 21:41

月月好制作，我都不晓得黑黑有这个教程分享{:4_203:}

小辣椒 发表于 2023-7-17 21:44

月月这个路径做的太漂亮了{:4_178:}

红影 发表于 2023-7-17 21:57

这个太壮观了，月儿把里面的小球都换成了图片，非常有想象力，很赞{:4_199:}

千羽 发表于 2023-7-17 21:59

真的是天长地久于宇宙中……{:4_173:}

千羽 发表于 2023-7-17 22:02

这个旋转效果挺美，色调也调的漂亮，咱们就跟着一起转哈{:4_173:}{:4_187:}

花飞飞 发表于 2023-7-17 22:04

小辣椒 发表于 2023-7-17 21:41
月月好制作，我都不晓得黑黑有这个教程分享

我是翻了两次箱底翻出来的。。

花飞飞 发表于 2023-7-17 22:05

小辣椒 发表于 2023-7-17 21:44
月月这个路径做的太漂亮了

https://www.huachaowang.com/forum.php?mod=viewthread&tid=58494&extra=page%3D1
这里，你瞧瞧

花飞飞 发表于 2023-7-17 22:06

红影 发表于 2023-7-17 21:57
这个太壮观了，月儿把里面的小球都换成了图片，非常有想象力，很赞

谢谢影子鼓励，这个不难想象，纯套用。。。{:4_170:}

花飞飞 发表于 2023-7-17 22:07

千羽 发表于 2023-7-17 21:59
真的是天长地久于宇宙中……

有天有地，还挺久，所以就找了这首歌，还是天地长久比较切题{:4_173:}

花飞飞 发表于 2023-7-17 22:07

千羽 发表于 2023-7-17 22:02
这个旋转效果挺美，色调也调的漂亮，咱们就跟着一起转哈

{:4_170:}好，别晕了哈。

千羽 发表于 2023-7-17 22:08

花飞飞 发表于 2023-7-17 22:07
有天有地，还挺久，所以就找了这首歌，还是天地长久比较切题

学霸的脑瓜就是灵，很贴切的{:4_187:}

醉美水芙蓉 发表于 2023-7-17 22:11

花飞飞 发表于 2023-7-17 22:11

千羽 发表于 2023-7-17 22:08
学霸的脑瓜就是灵，很贴切的

{:4_170:}天天瞎闹着玩。。话说你有两天没来玩了。。

花飞飞 发表于 2023-7-17 22:12

醉美水芙蓉 发表于 2023-7-17 22:11
欣赏月儿美贴！

谢谢水芙蓉支持哦。。{:4_187:}

千羽 发表于 2023-7-17 22:12

花飞飞 发表于 2023-7-17 22:07
好，别晕了哈。

我早就习惯了，月儿晕了有我呢，不怕哈{:4_185:}

花飞飞 发表于 2023-7-17 22:13

千羽 发表于 2023-7-17 22:12
我早就习惯了，月儿晕了有我呢，不怕哈

有你就不怕。。。这事儿不用商量{:4_170:}

千羽 发表于 2023-7-17 22:13

花飞飞 发表于 2023-7-17 22:11
天天瞎闹着玩。。话说你有两天没来玩了。。

嗯，这几天在瞎忙{:4_173:}

花飞飞 发表于 2023-7-17 22:13

千羽 发表于 2023-7-17 22:13
嗯，这几天在瞎忙

嗯嗯，忙完就来晃一晃

千羽 发表于 2023-7-17 22:14

花飞飞 发表于 2023-7-17 22:13
有你就不怕。。。这事儿不用商量
嗯，时刻记住我是大帅哦{:4_203:}

查看完整版本: 天地长久（学习黑师《太阳地球月亮》旋转效果）