火星卫星旋转动画效果
代码语言:html
所属分类:动画
代码描述:火星卫星旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } #canvas { width: 100vw; height: 100vh; background-image: radial-gradient(rgb(0,0,0), rgb(50, 50, 50)); position: relative; z-index: -9999999; } #canvas span { background-color: white; border-radius: 50%; position: absolute; z-index: 9; } .bg-image { position: absolute; top: 50%; transform: translateY(-50%); max-width: 100%; opacity: .4; } .newStar { display: block; transition: 1s; position: absolute; z-index: 99; border-radius: 10%; background-image: radial-gradient(#fff, rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,0) 70%, #fff); opacity: 1; } /* starts https://codepen.io/artyom-ivanov/pen/QjOYbO */ .planet{ width:5vw; height:5vw; position:absolute; border-radius:50%; overflow:hidden; box-shadow: 0 0 60px -20px rgba(255, 189, 3, 0.72), -14px -15px 40px -10px rgba(255, 238, 191, 0.23); left:50%; top:50%; z-index: 999; } .planet .mask{ width:100%; height:100%; position: absolute; box-shadow:inset -10px -10px 40px #251303, inset 10px 10px 30px -10px rgba(255, 204, 159, 0.6); border-radius:50%; } .planet .background{ animation: translateBackground 40s infinite linear; background:url(http://repo.bfw.wiki/bfwrepo/image/5ec0779dc7b4d.png) repeat-x; width:5vw; height:5vw; position:absolute; border-radius:50%; } .planet .clouds{ background:url(http://repo.bfw.wiki/bfwrepo/image/5ec0776f15c25.png) repeat-x; width:5vw; height:5vw; position:absolute; border-radius:50%; animation: translateBackground 30s infinite linear; opacity: 0.4; } .planet .wrap{ width:5vw; height:5vw; position:absolute; border-radius:50%; animation: rotatePlanet 150s infinite linear; } @keyframes translateBackground{ 0%{ background-position-x:0; } 100%{ background-position-x:-600px; } } @keyframes rotatePlanet{ 0%{ transform:rotateZ(0); } 100%{ transform:rotateZ(-360deg); } } .rotate-element { position: absolute; top: 50%; left: 50%; width: 2vw; height: 2vw; background-image: url('http://repo.bfw.wiki/bfwrepo/image/5ec077bb0c56a.png'); background-size: cover; background-position: center; border-radius: 50%; animation: rotate 5s linear infinite; transform-style: preserve-3d; } @keyframes rotate{ 0%{ transform: rotateY(0deg) translateX(7vw) translateZ(0); z-index: 9999; } 25% { transform: rotateY(90deg) translateX(0) translateZ(0%); z-index: 9999; } 50% { transform: rotateY(180deg) translateX(-5vw) translateZ(0%); } 75% { transform: rotateY(270deg) translateX(0%) translateZ(0%); } 100%{ transform: rotateY(360deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0