Html5 Chinese Valentine's Day, flowers, animated effects,

Html5 Chinese Valentine's Day, flowers, animated effects,

Share an html5 Valentine's day Valentine's Day animation special effect is a Chinese Valentine's day Valentine's Day, similar to an animated short film. As follows:

Download Online Preview source code

Implementation code.

Html code:

<Div id = 'content'> <ul class = 'content-wrapp'> <! -- First image --> <li> <! -- Background image --> <div class = "a_background"> <div class = "a_background_top"> </div> <div class = "a_background_middle"> </div> <div class = "a_background_botton"> </div> <! -- Cloud --> <div class = "cloudArea"> <div class = "cloud cloud1"> </div> <div class = "cloud cloud2"> </div> </ div> <! -- Sun --> <div id = "sun"> </div> </li> <! -- Secondary image --> <li> <! -- Background image --> <div class = "B _background"> </div> <div class = "B _background_preload"> </div> <! -- Store --> <div class = "shop"> <div class = "door"> <div class = "door-left"> </div> <div class = "door "-right "> </div> <! -- Lamp --> <div class = "lamp"> </div> <! -- Bird --> <div class = "bird"> </div> </li> <! -- Third picture --> <li> <! -- Background image --> <div class = "c_background"> <div class = "c_background_top"> </div> <div class = "c_background_middle"> </div> <div class = "c_background_botton"> </div> <! -- Little girl --> <div class = "girl"> </div> <div class = "bridge-bottom"> <div class = "water"> <div id = "water1 "class =" water_1 "> </div> <div id =" water2 "class =" water_2 "> </div> <div id =" water3 "class =" water_3"> </div> <div id = "water4" class = "water_4"> </div> <! -- Star --> <ul class = "stars"> <li class = "stars1"> </li> <li class = "stars2"> </li> <li class = "stars3"> </li> <li class = "stars4"> </li> <li class = "stars5"> </li> <li class = "stars6"> </li> </ul> <! -- MOOC logo chart --> <div class = "logo"> I wish the world a lover </div> </li> </ul> <! -- Snowflake --> <div id = "snowflake"> </div> <! -- Boys --> <div id = "boy" class = "charector"> </div>

Via: http://www.w2bc.com/article/60851