<style>
#mydiv {
margin: 0 0 0 calc(50% - 640px);
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>

前一篇: 自然之道（学习黑师《漫途》多个粒子弧形运动效果）
下一篇: 天长地久（学习黑师《太阳地球月亮》旋转效果）