css实现一个宇宙行星卫星环绕动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个宇宙行星卫星环绕动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --dark-color: rgb(0,0,0); --glossy-red: rgba(238, 17, 17, 1); --light-red: rgba(238, 17, 17, .5); --very-light-red: rgba(238, 17, 17, .25); --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red) ; --paths-theme: var(--very-light-red) var(--glossy-red); } * { box-sizing: border-box; padding: 0; border: 0; } body { overflow: hidden; background-color: var(--dark-color); } #solar-system { display: flex; width: 100vw; height: 100vh; -webkit-transform: skewX(-45deg); -moz-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -o-transform: skewX(-45deg); transform: skewX(-45deg); transform-origin: center; justify-content: center; align-items: center; } /* planets */ #sun { position: fixed; z-index: 100; width: 174.085px; height: 174.085px; -webkit-transform: skewX(45deg); -moz-transform: skewX(45deg); -ms-transform: skewX(45deg); -o-transform: skewX(45deg); transform: skewX(45deg); border-radius: 50%; background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%); -webkit-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%); -moz-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%); -o-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%); -ms-background: linear-gradient(135deg, var(--glossy-red) 20%, transparent 100%); filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px); } #mercury { position: fixed; top: 36px; display: flex; width: 24.397px; height: 24.397px; -webkit-animation: planets-rotation 29s linear infinite; -moz-animation: planets-rotation 29s linear infinite; -ms-animation: planets-rotation 29s linear infinite; -o-animation: planets-rotation 29s linear infinite; animation: planets-rotation 29s linear infinite; border-width: 2px; border-style: solid; border-color: var(--planets-theme); border-radius: 50%; background: transparent; justify-content: center; align-items: center; } #venus { position: fixed; top: 11px; display: flex; width: 60.518px; height: 60.518px; -webkit-animation: planets-rotation 121.5s linear infinite; -moz-animation: planets-rotation 121.5s linear infinite; -ms-animation: planets-rotation 121.5s linear infinite; -o-animation: planets-rotation 121.5s linear infinite; animation: planets-rotation 121.5s linear infinite; border-width: 2px; border-style: solid; border-color: var(--planets-theme); border-radius: 50%; background: transparent; justify-content: center; align-items: center; } #earth { position: fixed; top: 30px; display: flex; width: 63.71px; height: 63.71px; /* animation-duration: .5s = 1 day on earth */ -webkit-animation: planets-rotation .5s linear infinite; -moz-animation: planets-rotation .5s linear infinite; -ms-animation: planets-rotation .5s linear infinite; -o-animation: planets-rotation .5s linear infinite; animation: planets-rotation .5s linear infinite; border-width: 2px; border-style: solid; border-color: var(--planets-theme); border-radius: 50%; background: transparent; justify-content: center; align-items: center; } #earth::after { position: absolute; width: 40%; /* <-- set to 10% for the real planet size*/ height: 40%; content: ''; -webkit-animation: blink-earth 2s linear infinite; -moz-animation: blink-earth 2s linear infinite; -ms-animation: blink-earth 2s linear infinite; -o-animation: blink-earth 2s linear infinite; animation: blink-earth 2s linear infinite; border-radius: 50%; background: var(--glossy-red); -webkit-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px); -moz-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px); -o-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px); -ms-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px); filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px); } #mars { position: fixed; top: 118px; display: flex; width: 33.89.........完整代码请登录后点击上方下载按钮下载查看
网友评论0