逼真的HTML5树叶飘落动画
程序员文章站
2023-11-30 22:44:16
这篇文章主要为大家详细介绍了一款逼真的HTML5树叶飘落动画,树叶飘落的动画效果非常真实,树叶都是图片,并非CSS3绘制,感兴趣的小伙伴们可以参考一下... 16-03-01...
这款html5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。
html代码
xml/html code复制内容到剪贴板
- <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>这是基于webkit的落叶动画</em>
- </div>
- </div>
css代码
css code复制内容到剪贴板
- #container {
- position: relative;
- height: 700px;
- width: 500px;
- margin: 10px auto;
- overflow: hidden;
- border: 4px solid #5c090a;
- background: #4e4226 url('images/backgroundleaves.jpg') no-repeat top left;
- }
- /* defines the position and dimensions of the leafcontainer div */
- #leafcontainer
- {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- /* defines the appearance, position, and dimensions of the message div */
- #message
- {
- position: absolute;
- top: 160px;
- width: 100%;
- height: 300px;
- background:transparent url('images/textbackground.png') repeat-x center;
- color: #5c090a;
- font-size: 220%;
- font-family: 'georgia';
- text-align: center;
- padding: 20px 10px;
- -webkit-box-sizing: border-box;
- -webkit-background-size: 100% 100%;
- z-index: 1;
- }
- p {
- margin: 15px;
- }
- a
- {
- color: #5c090a;
- text-decoration: none;
- }
- /* sets the color of the "dino's gardening service" message */
- em
- {
- font-weight: bold;
- font-style: normal;
- }
- .phone {
- font-size: 150%;
- vertical-align: middle;
- }
- /* this css rule is applied to all div elements in the leafcontainer div.
- it styles and animates each leafdiv.
- */
- #leafcontainer > div
- {
- position: absolute;
- width: 100px;
- height: 100px;
- /* we use the following properties to apply the fade and drop animations to each leaf.
- each of these properties takes two values. these values respectively match a setting
- for fade and drop.
- */
- -webkit-animation-iteration-count: infinite, infinite;
- -webkit-animation-direction: normal, normal;
- -webkit-animation-timing-function: linear, ease-in;
- }
- /* this css rule is applied to all img elements directly inside div elements which are
- directly inside the leafcontainer div. in other words, it matches the 'img' elements
- inside the leafdivs which are created in the createaleaf() function.
- */
- #leafcontainer > div > img {
- position: absolute;
- width: 100px;
- height: 100px;
- /* we use the following properties to adjust the clockwisespin or counterclockwisespinandflip
- animations on each leaf.
- the createaleaf function in the leaves.js file determines whether a leaf has the
- clockwisespin or counterclockwisespinandflip animation.
- */
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-transform-origin: 50% -100%;
- }
- /* hides a leaf towards the very end of the animation */
- @-webkit-keyframes fade
- {
- /* show a leaf while into or below 95 percent of the animation and hide it, otherwise */
- 0% { opacity: 1; }
- 95% { opacity: 1; }
- 100% { opacity: 0; }
- }
- /* makes a leaf fall from -300 to 600 pixels in the y-axis */
- @-webkit-keyframes drop
- {
- /* move a leaf to -300 pixels in the y-axis at the start of the animation */
- 0% { -webkit-transform: translate(0px, -50px); }
- /* move a leaf to 600 pixels in the y-axis at the end of the animation */
- 100% { -webkit-transform: translate(0px, 650px); }
- }
- /* rotates a leaf from -50 to 50 degrees in 2d space */
- @-webkit-keyframes clockwisespin
- {
- /* rotate a leaf by -50 degrees in 2d space at the start of the animation */
- 0% { -webkit-transform: rotate(-50deg); }
- /* rotate a leaf by 50 degrees in 2d space at the end of the animation */
- 100% { -webkit-transform: rotate(50deg); }
- }
- /* flips a leaf and rotates it from 50 to -50 degrees in 2d space */
- @-webkit-keyframes counterclockwisespinandflip
- {
- /* flip a leaf and rotate it by 50 degrees in 2d space at the start of the animation */
- 0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
- /* flip a leaf and rotate it by -50 degrees in 2d space at the end of the animation */
- 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
- }
javascript代码
javascript code复制内容到剪贴板
- /* define the number of leaves to be used in the animation */
- const number_of_leaves = 30;
- /*
- called when the "falling leaves" page is completely loaded.
- */
- function init()
- {
- /* get a reference to the element that will contain the leaves */
- var container = document.getelementbyid('leafcontainer');
- /* fill the empty container with new leaves */
- for (var i = 0; i < number_of_leaves; i++)
- {
- container.appendchild(createaleaf());
- }
- }
- /*
- receives the lowest and highest values of a range and
- returns a random integer that falls within that range.
- */
- function randominteger(low, high)
- {
- return low + math.floor(math.random() * (high - low));
- }
- /*
- receives the lowest and highest values of a range and
- returns a random float that falls within that range.
- */
- function randomfloat(low, high)
- {
- return low + math.random() * (high - low);
- }
- /*
- receives a number and returns its css pixel value.
- */
- function pixelvalue(value)
- {
- return value + 'px';
- }
- /*
- returns a duration value for the falling animation.
- */
- function durationvalue(value)
- {
- return value + 's';
- }
- /*
- uses an img element to create each leaf. "leaves.css" implements two spin
- animations for the leaves: clockwisespin and counterclockwisespinandflip. this
- function determines which of these spin animations should be applied to each leaf.
- */
- function createaleaf()
- {
- /* start by creating a wrapper div, and an empty img element */
- var leafdiv = document.createelement('div');
- var image = document.createelement('img');
- /* randomly choose a leaf image and assign it to the newly created element */
- image.src = 'images/realleaf' + randominteger(1, 5) + '.png';
- leafdiv.style.top = "-100px";
- /* position the leaf at a random location along the screen */
- leafdiv.style.left = pixelvalue(randominteger(0, 500));
- /* randomly choose a spin animation */
- var spinanimationname = (math.random() < 0.5) ? 'clockwisespin' : 'counterclockwisespinandflip';
- /* set the -webkit-animation-name property with these values */
- leafdiv.style.webkitanimationname = 'fade, drop';
- image.style.webkitanimationname = spinanimationname;
- /* figure out a random duration for the fade and drop animations */
- var fadeanddropduration = durationvalue(randomfloat(5, 11));
- /* figure out another random duration for the spin animation */
- var spinduration = durationvalue(randomfloat(4, 8));
- /* set the -webkit-animation-duration property with these values */
- leafdiv.style.webkitanimationduration = fadeanddropduration + ', ' + fadeanddropduration;
- var leafdelay = durationvalue(randomfloat(0, 5));
- leafdiv.style.webkitanimationdelay = leafdelay + ', ' + leafdelay;
- image.style.webkitanimationduration = spinduration;
- // add the <img> to the <div>
- leafdiv.appendchild(image);
- /* return this img element so it can be added to the document */
- return leafdiv;
- }
- /* calls the init function when the "falling leaves" page is full loaded */
- window.addeventlistener('load', init, false);
以上就是本文的全部内容,希望对大家学习有所帮助。
上一篇: HTML5未来发展趋势