div+css实现地心宇宙行星公转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现地心宇宙行星公转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--pov: 66deg;
--bg-color: #111;
--day-duration: 8s;
--orbit-sphere-color: hsla(260, 80%, 60%, .6);
--orbit-line-color: hsl(260 50% 70%);
--orbit-line-thickness: .15rem;
--orbit-plane-color: radial-gradient(
circle at center,
hsla(250, 70%, 75%, .05),
hsla(250, 70%, 75%, .2)
);
--moon-orbit-size: 13dvmin;
--mercury-orbit-size: 26dvmin;
--venus-orbit-size: 39dvmin;
--sun-orbit-size: 52dvmin;
--mars-orbit-size: 65dvmin;
--jupiter-orbit-size: 78dvmin;
--saturn-orbit-size: 91dvmin;
}
body {
height: 100dvh;
margin: 0;
background: var(--bg-color);
}
.universe {
height: 100%;
perspective: 50000px;
translate: 0 -5%;
position: relative;
}
/* orbit line */
.orbit {
position: absolute;
top: 50%;
left: 50%;
width: var(--size, 30dvmin);
height: var(--size, 30dvmin);
border-radius: 50%;
background: var(--orbit-plane-color);
box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
transform-style: preserve-3d;
rotate: x var(--pov);
translate: -50% -40%;
opacity: 0;
-webkit-animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
}
@-webkit-keyframes orbit-appear {
to {
opacity: 1;
translate: -50% -50%;
}
}
@keyframes orbit-appear {
to {
opacity: 1;
translate: -50% -50%;
}
}
/* orbit semi-sphere */
.orbit::after {
--cutout: calc(var(--size) / 2 + var(--orbit-line.........完整代码请登录后点击上方下载按钮下载查看
网友评论0