小白学前端化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）
Posted 长安紫薯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白学前端化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）相关的知识，希望对你有一定的参考价值。
功能需求
实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，CSS3提供了圆角样式，非常方便的解决了这个问题。
先准备一个正方形的图片，然后设置其当圆角超过图片半径时，自然就成为一个圆。
CSS3增加了强大的动画功能，可以让图片进行旋转。
界面原型
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转地球</title>
<style type="text/css">
body{
margin-top: 50px
}
#rotation-earth{
margin: 0 auto;
width: 310px;
height: 310px;
background: url(img/earth.png); /* 背景图 */
border-radius: 300px; /* 超过半径形成圆形 */
/* 动画
run 调用的动画函数名称
6s 动画执行的耗时
linear 动画路径线性
0s 不延迟
infinite 反复播放动画
*/
-webkit-animation: run 6s linear 0s infinite;
}
/*
keyframes 动画的关键帧，动画由几个关键帧组成，中间的过程，动画引擎自动构建完成
transform 变形
rotate 旋转角度 0deg 零度，360 度
*/
@-webkit-keyframes run{
from{ -webkit-transform: rotate(0deg);}
to{ -webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="rotation-earth"></div>
</body>
</html>
以上是关于小白学前端化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）的主要内容，如果未能解决你的问题，请参考以下文章
小白学前端化腐朽为神奇-HTML+CSS3实现圆头像（day02-1）
小白学前端化腐朽为神奇-HTML+CSS3实现课程页（day02-3）
小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）
小白学前端化腐朽为神奇-Bootstrap实现表单美化（day02-6）