【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球(day02-4)

功能需求

实现地球旋转,本质是一张图片,在网页中图片都是矩形没有直接提供圆形,CSS3提供了圆角样式,非常方便的解决了这个问题。
先准备一个正方形的图片,然后设置其当圆角超过图片半径时,自然就成为一个圆。
CSS3增加了强大的动画功能,可以让图片进行旋转。

界面原型

【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球(day02-4)_第1张图片

实现代码

<!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>

你可能感兴趣的:(front-end,大前端,html,css3)