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

最新推荐文章于 2023-09-06 09:28:44 发布

长安紫薯

最新推荐文章于 2023-09-06 09:28:44 发布

阅读量1.1k

点赞数 1

分类专栏： front-end 大前端文章标签： html css3

本文链接：https://blog.csdn.net/nutony/article/details/116583624

版权

front-end 大前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

功能需求

实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，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>

长安紫薯

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）

功能需求实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，CSS3提供了圆角样式，非常方便的解决了这个问题。先准备一个正方形的图片，然后设置其当圆角超过图片半径时，自然就成为一个圆。CSS3增加了强大的动画功能，可以让图片进行旋转。界面原型实现代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋
复制链接

扫一扫