纯css实现太阳系行星旋转动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现太阳系行星旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/**
* I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets
* are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate
* Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go
* building one in pure CSS.
*
* Many thanks to @aidandore and @iandevlin too for suggestions and improvements
*
* Chin up Pluto. You'll always be a planet to me...
*
* Tady: http://tady.me
* @tadywankenobi
*/
/**
* Move in a circle without wrapper elements
* Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me!
*/
body {
background-color: #012;
background-size: 33%;
background-repeat: repeat;
min-height: 2025px;
}
.system {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.sun {
width: 144px;
height: 144px;
border-radius: 72px;
position: absolute;
top: 1066.6666666667px;
left: 50%;
margin: -72px;
background-image: url("data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0