Home > Article > Web Front-end > Use Html5 to achieve the effect of falling leaves

Use Html5 to achieve the effect of falling leaves

迷茫Original: 2017-03-26 15:41:343875browse

Achieve the effect as shown in the picture (falling leaves):

html code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5树叶飘落动画</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=500px, initial-scale=0.64">
    <link rel="stylesheet" href="leaves.css" type="text/css">
    <script src="leaves.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="leafContainer"></div>
        <div id="message">
            <em>这是基于webkit的落叶动画</em>
        </div>
    </div>  
</body>
</html>

css code:

body{
    background-color: #4E4226;
}#container {
    position: relative;
    height: 700px;
    width: 500px;
    margin: 10px auto;
    overflow: hidden;
    border: 4px solid #5C090A;
    background: #4E4226 url(&#39;images/backgroundLeaves.jpg&#39;) no-repeat top left;
}#leafContainer {
    position: absolute;
    width: 100%;
    height: 100%;
}#message{
    position: absolute;
    top: 160px;
    width: 100%;
    height: 300px;
    background:transparent url(&#39;images/textBackground.png&#39;) repeat-x center;
    color: #5C090A;
    font-size: 220%;
    font-family: &#39;Georgia&#39;;
    text-align: center;
    padding: 20px 10px;
    -webkit-box-sizing: border-box;
    -webkit-background-size: 100% 100%;
    z-index: 1;
}em {
    font-weight: bold;
    font-style: normal;
}#leafContainer > p {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}#leafContainer > p > img {
     position: absolute;
     width: 100px;
     height: 100px;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}@-webkit-keyframes fade{
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }}

@-webkit-keyframes drop{
    0%   { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }}

@-webkit-keyframes clockwiseSpin{
    0%   { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }}


@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }}

js code:

const NUMBER_OF_LEAVES = 30;
function init(){
    var container = document.getElementById(&#39;leafContainer&#39;);
    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 + &#39;px&#39;;
}

function durationValue(value){
    return value + &#39;s&#39;;
}

function createALeaf(){
    var leafDiv = document.createElement(&#39;div&#39;);
    leafDiv.style.top = "-100px";
    leafDiv.style.left = pixelValue(randomInteger(0, 500));
    leafDiv.style.webkitAnimationName = &#39;fade, drop&#39;;
    var fadeAndDropDuration = durationValue(randomFloat(5, 11));
    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + &#39;, &#39; + fadeAndDropDuration;
    var leafDelay = durationValue(randomFloat(0, 5));
    leafDiv.style.webkitAnimationDelay = leafDelay + &#39;, &#39; + leafDelay;
    
    var image = document.createElement(&#39;img&#39;);
    image.src = &#39;images/realLeaf&#39; + randomInteger(1, 5) + &#39;.png&#39;;
    var spinAnimationName = (Math.random() < 0.5) ? &#39;clockwiseSpin&#39; : &#39;counterclockwiseSpinAndFlip&#39;;
    image.style.webkitAnimationName = spinAnimationName;
    var spinDuration = durationValue(randomFloat(4, 8));
    image.style.webkitAnimationDuration = spinDuration;

    leafDiv.appendChild(image);
    return leafDiv;
}

window.addEventListener(&#39;load&#39;, init, false);

The above is the detailed content of Use Html5 to achieve the effect of falling leaves. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Canvas implements circular progress bar and displays numerical percentageNext article：Canvas implements circular progress bar and displays numerical percentage

See more

Use Html5 to achieve the effect of falling leaves

Related articles