Verwenden Sie HTML5, um den Effekt fallender Blätter zu erzielen-H5-Tutorial-php.cn

Verwenden Sie HTML5, um den Effekt fallender Blätter zu erzielen

迷茫

Freigeben： 2017-03-26 15:41:34

Original

3924 Leute haben es durchsucht

Um den im Bild gezeigten Effekt zu erzielen (fallende Blätter):

Verwenden Sie HTML5, um den Effekt fallender Blätter zu erzielen

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>

Nach dem Login kopieren

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); }}

Nach dem Login kopieren

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);

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML5, um den Effekt fallender Blätter zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!