Html5+css3 realizes the Spring Festival greeting card

Html5+css3 realizes the Spring Festival greeting card

Transduction---refactoring--front-to-back optimization

Know the native JS code, understand Html5api, understand wampserver.

The structure layer is index.html

Because you need to click on the disc to let the music start and stop, and use the ID to get the element is easier than class, so we changed the music to id= "Music"

the presentation layer is STYLE.CSS

PX is the pixel value, and EM is the size of the font according to the Datum. EM is calculated relative to the attributes of the parent element, REM is relative to the root element

The Box-sizing property allows you to define certain elements in some way to fit the specified area.

Animation animation

Special Effects

Using animation and keyframes

Effect 1-1, disc rotation

Effect 1-2, Red lantern flashing

Effect 2-3, three turns

Html5+css3 realizes the Spring Festival greeting card