前言

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

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

中秋活动--给小玉兔画个超级月亮来作伴_css

画超级月亮吧

画小玉兔的可详细参考​​juejin.cn/post/700518…​

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

中秋活动--给小玉兔画个超级月亮来作伴_背景图_02

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

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

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

中秋活动--给小玉兔画个超级月亮来作伴_css_03

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

ok,上代码

我的目录结构:

中秋活动--给小玉兔画个超级月亮来作伴_前端_04

html:

中秋活动--给小玉兔画个超级月亮来作伴_背景图_05

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;
}

提供几张美美的月饼背景图

摄影这个兴趣爱好真不错,每当没有适合的素材的时候,圈里的大佬们都为我提供美图, 我的月饼和月亮图就期待明年的中秋了

页面用的背景图都放到了img目录

来和小兔子一起在我的冷宫里一起赏月吃月饼吧

中秋活动--给小玉兔画个超级月亮来作伴_前端_06

中秋活动--给小玉兔画个超级月亮来作伴_背景图_07

中秋活动--给小玉兔画个超级月亮来作伴_html_08

中秋活动--给小玉兔画个超级月亮来作伴_html_09