Home > Developer > JavaScript
JQuery + CSS3 implements special effects on falling leaves, jquerycss3
Use Chrome to view the effect.
Html source code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> HTML5 fallen leaves animation-ke leyi </title> <base target = "_ blank" href = "http://keleyi.com/keleyi/phtml/css3/"/>
<Meta charset = "UTF-8">
<Meta name = "viewport" content = "width = 500px, initial-scale = 0.64">
<Link rel = "apple-touch-icon" href = "http://keleyi.com/keleyi/phtml/css3/15/images/apple-touch-icon.png"/>
<! -- The leaves.css file animates the leaves -->
<Link rel = "stylesheet" href = "http://keleyi.com/keleyi/phtml/css3/15/leaves.css" type = "text/css" media = "screen" charset = "UTF-8">
<Script type = "text/javascript" src = "http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"> </script>
<! -- The leaves. js file creates the leaves -->
<Script src = "http://keleyi.com/keleyi/phtml/css3/15/leaves.js" type = "text/javascript" charset = "UTF-8"> </script>
</Head>
<Body>
<Div style = "text-align: center; clear: both; margin-top: 0px">
<Span id = "keleyi">
Please use Chrome to view this page.
</Span>
</Div>
<Div id = "container">
<! -- The container is dynamically populated using the init function in leaves. js -->
<! -- Its dimensions and position are defined using its id selector in leaves.css -->
<Div id = "leafContainer"> </div>
<! -- Its appearance, dimensions, and position are defined using its id selector in leaves.css -->
<Div id = "message">
<Em> falling Red is not a heartless thing </em>
</Div>
</Div>
</Body>
</Html>
It is very suitable for a special effect on a personal homepage or blog. If you like this special effect, take it away directly. You can also expand it as needed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
