preface

I am participating in the Mid-Autumn Festival creative submission contest, please see juejin.cn/post/700315…

Recently I am learning HTML, I find HTML is really interesting, yesterday I drew a little jade rabbit with CSS, we like it very much, but nuggets friend told me that the article posted yesterday can not participate in the activity, but it doesn’t matter, Mid-Autumn Festival, we can not let the little jade rabbit alone, let it hug the moon… This is the result drawing

Draw the supermoon

Please refer to juejin.cn/post/700518…

My HTML body consists of two main sections: the moon and the rabbit, using two divs

Moon is round, let’s use CSS to draw a circle and color it. You can change it to any color, any size. height:200px; border:solid 5px black; background: sandybrown; border-radius: 50%; }

“I also want my moon to move and interact with me,” the rabbit said. ok, let’s dance!

Animation-duration can control the speed at which the moon dances. The smaller the time, the more intense the dance will be. I set 1s here, and the rabbit danced happily with it.

The core part is these, and then add the small rabbit, the moon and rabbit can be happy to embrace, this time I also intimate to give them a beautiful background, you can also set up oh, there are a lot of places to improve.

Ok, in the code

My directory structure:

html:

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); }} /* @webkit-keyframes spin {from {transform: rotate(0deg); } to { transform: rotate(1800deg); }} /* rotate, gradient */ #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; }Copy the code

Provide some beautiful mooncake background pictures

Photography this hobby is really good, when there is no suitable material, the big guys in the circle provide me with beautiful pictures, my moon cakes and moon pictures look forward to next year’s Mid-Autumn Festival

The background images for the page are placed in the IMG directory

Come and eat mooncakes with the rabbit in my cold palace