Animated effects of Htm5+css3+js

Source: Internet
Author: User

<! DOCTYPE html>

  

<! DOCTYPE html><body>    <section class= "container" >        <!--first picture-->        <section class= "page-a bg-adaptive" >            <!--boy-->            <div class= "Chs-boy chs-boy-deer" ></div>            <!--Moon-->            <div class= "Moon" ></div>    &NBSP ;       <!--Cloud-->            <div class= "Cloudy" ></div>&nbsp ;           <!--Christmas tree-->            <figure class= "Tree" > </figure>            <!--stars-->            &LT;SV G viewbox= "0 0 486" >                <defs>                   <lineargradient id= "star" x1= "0%" y1= "0%" x2= "100%" y2= "0%" >                        <stop offset= "0%" stop-color= "#FCF0BC" ></stop>                        <stop offset= "0%" stop-color= "#FCF0BC" ></st op>                    </linearGradient>    &N Bsp         </defs>                <polygon style= "fill: URL (#star); "points=" 256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>            </svg>            <!--windows-->            &LT;DIV C lass= "Window Wood" >                <div class= "WINDOW-BG" ></div>        &NB Sp       <div class= "window-content" >                  &NBS P <div class= "Window-left" ></div>                    &LT;DIV C lass= "Window-right" ></div>                </div>    & nbsp       </div>        </section>        <!--second picture--& gt;        <section class= "Page-b bg-adaptive" >            <!-- Cat-->            <figure class= "cat" ></figure>        &N Bsp   <!--little girl-->            <figure class= "Girl" ></figure>  &nbsp ;   &NBsp     <!--Christmas boy-->            <figure class= "Christmas-boy-head" ></ figure>            <figure class= "Christmas-boy boy-walk" > </figure>            <!--carousel-->            <div id= "Carousel" >& nbsp               <figure id= "spinner" ></figure>        &NB Sp   </div>        </section>        <!--the third picture-->  &nbs P     <section class= "Page-c bg-adaptive" >            <!--Moon-->            <div class= "Moon" ></div>            <!--Cloud -->            <div class= "Cloudy" ></div>
            <!--stars-->            <svg viewbox= "0 0 486 >                <defs>                    <lineargradient id= "star" x1= "0%" y1= "0%" x2= "100%" y2= "0%" >                        <stop offset= "0%" stop-color= "#FCF0BC" ></stop>                        <stop offset= "0%" stop-color= "#FCF0BC" > </stop>                    </linearGradient>    &N Bsp           </defs>                <polygon style= "Fill:url (#star);" points= "256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>            </svg>
            <!--Christmas tree-->            <figure class= "tr EE treefix "></figure>            <!--deer-->            <figure class= "Deer" ></figure>            <!--windows Close-->  &nbs P         <div class= "window Wood" >                <!-- <div class= "WINDOW-BG" ></div>-->                <div class= "wi Ndow-content "data-attr=" Red ">                    <div class=" Wind OW-SCENE-BG "></div>                    <div class=" window-c LOSE-BG "></div>                    <div class=" Window-left h Over "></div>&nbsp                   <div class= "window-right hover" ></div>  &N Bsp             </div>            </div>            <!--Snowflake-->            <canvas id= "snowflake" style= "PO sition:absolute;z-index:999; " ></canvas>        </section>    </section></body>

Animated effects of Htm5+css3+js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.