Skip to content

Instantly share code, notes, and snippets.

@MrTheWhiteHat

MrTheWhiteHat/CSS3

Last active February 25, 2017 09:52
Show Gist options
  • Save MrTheWhiteHat/b492862ec6a81a350107584dd061e4a4 to your computer and use it in GitHub Desktop.
Save MrTheWhiteHat/b492862ec6a81a350107584dd061e4a4 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3实现地球自动旋转效果并实现使用一张图片的扩大的效果旋转+如何实现使地球不随浏览器的缩放而缩放，并且处于居中位置。
Raw
CSS3
第一个问题：---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testEarth</title>
<style type="text/css">
.top
{
animation: earthBox 6s linear infinite;
//CSS3中的动画设置属性，定义了要实现动画的部分，相当于css里的选择器，选择了top这块来实现动画效果
//【linear:直线;infinite:无穷的，无限的】相当于初始化
}
.earth
{
background-image: url(earth.png); //随便一张图
position: relative;
width: 900px;
height: 900px;
border-radius: 0%;
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ccc;
animation: earth 6s linear infinite;/*动画设置，同上同为动画设置前的选择器*//}
@keyframes earth { // 实现图片旋转
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes earthBox { //实现图片在earthBox里的的放缩
0%{transform: scale(0.6, 0.6); opacity: 1;}
100%{transform: scale(0.6, 0.6); opacity: 1;}
}
</style>
</head>
<body>
<div class="top">
<div class="earth">
</div>
</div>
</body>
</html>
第二个问题：-----------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta charset="utf-8">
<title>testEarth</title>
<sytle type = "text/css">
/* 以下是球类转动的部分*/
.earth_box
{
/*控制装球盒子的宽度*/
width: 50%;
padding-top: 50%;
z-index:1;
}
.earth_center /*不能使用.earth_box .earth_center: 因为这样只会是这整个居中而对使用earth_center的不起渲染作用，只选择了这一个DIV而已*/
{
/*使装球的盒子居中，而且盒子div不会随着浏览器的放大而变化*/
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
.earth_big
{
transform: rotate(360deg);
width: 100%;
padding-top: 100%;
opacity: 1; /*设置图片的透明度，1表示不透明*/
}
.earth_small
{
transform: rotate(-360deg);
width: 60%;
padding-top: 60%;
opacity: 0.8;
}
.earth /*球类通用*/
{
background-image:url(../images/earth.png);
/*下面两句话，是解决问题的关键，决定着球是否围绕着一个圆心转，特别重要，浪费了好多时间*/
backgroud-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-size: 100%;
animation: earth 18S linear infinite;
}
@keyframes earth
{
100% {
transform: rotate(0);
}
}
</sytle>
<head>
<body>
<!--善于利用多个class名作CSS 选择器，同类不同效果 -->
<div class = "earth_box earth_center">
<i class="earth earth_big earth_center"></i>
<i class="earth earth_small earth_center"></i>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment