HTML5 leaf falling animation,
Use Chrome to view the effect.
Html source code:
Html code
- <! 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">
- <A href = "http://keleyi.com"> Home </a> <a href = "http://keleyi.com/keleyi/phtml/">
- Special Effect Library
- </A> <a href = "http://keleyi.com/a/bjae/h1o76nuh.htm"> original </a> View this page in Chrome.
- </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>
Reprinted from: http://keleyi.com/a/bjae/h1o76nuh.htm
