This HTML5 leaf falling animation is based on the webkit core, which means that this animation can only be used on a browser with a webkit core.
Source code download Demo address
HTML code
XML/HTML CodeCopy content to clipboard
-
<div id="container" >
-
-
-
<div id="leafContainer" >div>
-
-
<div id="message" >
< /- em>
div>
-
div>
-
CSS code
CSS CodeCopy content to clipboard
JavaScript代码
JavaScript Code复制内容到剪贴板
-
-
const NUMBER_OF_LEAVES = 30;
-
-
-
-
-
function init()
-
{
-
-
var container = document.getElementById('leafContainer');
-
-
for (var i = 0; i < NUMBER_OF_LEAVES; i )
- {
- container.appendChild(createALeaf());
- }
- }
-
-
-
-
-
- function randomInteger(low, high)
- {
- return low Math.floor(Math.random() * (high - low));
- }
-
-
-
-
-
- function randomFloat(low, high)
- {
- return low Math.random() * (high - low);
- }
-
-
-
-
- function pixelValue(value)
- {
- return value 'px';
- }
-
-
-
-
-
- function durationValue(value)
- {
- return value 's';
- }
-
-
-
-
-
-
-
- function createALeaf()
- {
-
- var leafDiv = document.createElement('div');
- var image = document.createElement('img');
-
-
- image.src = 'images/realLeaf' randomInteger(1, 5) '.png';
-
- leafDiv.style.top = "-100px";
-
-
- leafDiv.style.left = pixelValue(randomInteger(0, 500));
-
-
- var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
-
-
- leafDiv.style.webkitAnimationName = 'fade, drop';
- image.style.webkitAnimationName = spinAnimationName;
-
-
- var fadeAndDropDuration = durationValue(randomFloat(5, 11));
-
-
- var spinDuration = durationValue(randomFloat(4, 8));
-
- leafDiv.style.webkitAnimationDuration = fadeAndDropDuration ', ' fadeAndDropDuration;
-
- var leafDelay = durationValue(randomFloat(0, 5));
- leafDiv.style.webkitAnimationDelay = leafDelay ', ' leafDelay;
-
- image.style.webkitAnimationDuration = spinDuration;
-
-
以上就是本文的全部内容,希望对大家学习有所帮助。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn