前言

我正在参加中秋创意投稿大赛，详情请看juejin.cn/post/700315…

最近正在学习html, 发现html真的太有趣了，昨天用css画了一只小玉兔，大家很喜欢，但是掘金友友告诉我，昨天发的文章不能参与活动，但没关系，中秋佳节，我们也不能让小玉兔孤单，让它亲亲抱抱月亮吧。。。，这是成果图

图片.png

画超级月亮吧

我的html主体主要包括两个部分：月亮和兔子，用两个div

图片.png

月亮的效果和兔子的效果一样，全部用css实现
月亮是圆形的，我们就用css画一个圆，并给它上色，你可以变成任何颜色，任何大小（来动手试试吧）
这是我给小玉兔做的月亮
.moon{
width:200px;
height:200px;
border:solid 5px black;
background: sandybrown;
border-radius: 50%;
}

小玉兔摇着耳朵说：我还想让我的月亮能动，和我互动。
ok, let’s dance!

给月亮添加动画效果，有个属性animation-duration可以控制月亮跳舞的速度，时间越小跳的越激烈，我这里设置的1s, 小兔子和它跳的挺欢快的。

carbon (1).png

核心的部分就是这些了，然后把小玉兔加上来，月亮和兔子就可以快乐的拥抱了，这次我还贴心的给他们加了漂亮的背景，你们也可以自我进行设置哦，这里还是有很多可以改进的地方的。

ok,上代码

我的目录结构：

图片.png

html:

carbon (2).png

moon.css

.moon{
	width:200px;
	height:200px;
	border:solid 5px black;
	background: sandybrown;
	border-radius: 50%;
}

body{
	width: 100%;
	height: 100%;
	background-image: url(../img/moon.jpg);
}


/* 动画定义 */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(1800deg); }
}

/*Safari 和 Chrome:*/
@-webkit-keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(1800deg); }
}


/* 旋转，渐变色 */
#advanced {
	width: 200px;
	height: 200px;

	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);

	animation-name: spin; 
	animation-duration: 1s; /* 1 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}
复制代码