听说，月球转的次数多了也就成了pizza-css小项目

我不是默认名字

2022-04-18 577 阅读1分钟

我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！
这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

今天出的效果是让月球在疯狂的转动。仔细看的话，样子就像一个旋转的pizza，只是颜色过为单调了。下面是项目展示，项目代码和项目的延伸~

项目展示

行为思路

今天的内容比较简单
html:div盒子
css:元素选择器、animation动画，@keyframes动画,transform: translate对图形进行位移处理

代码展示

html

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div>
			/*一个平平无奇的div盒子*/
		</div>
	</body>
</html>

css

		/* 小月球也要有自己的大小 */
		width: 200px;
		height: 200px;
		/* 插入在线的图片 */
		background: url(https://pngimg.com/uploads/moon/moon_PNG49.png) 0 0 / 100% 100%;
		/* 咱就是说重启整个世界也挺好 */
		/* infinite:无限播放动画 */
		/* alternate-reverse反向交替运行动画 */
		animation: move 2s linear infinite alternate-reverse;
	}

@keyframes move{
	to{
		transform: translate(100%,0) rotate(100turn); 
	}
}

后续与加深

图片的选取：pngimg.com/

这里全是已经ps好的简单图，比如这次我用一个月亮，让他进行旋转效果，就直接选取了一张月亮的图片。（此部分就可以加以引申，可以做任何一个图案的一系列动作。）在这里依旧选择的是在线图片，右键复制链接即可。

小球进行转动：animation动画

这里选用的是linear infinite alternate-reverse，使其反复旋转。也可以使用animation里的其他动画，引用的内容比较简单，和当时的flash比较像，或者说是高级的flash。表达出你想要的任何的效果。