Heim > Artikel > Web-Frontend > Verwenden Sie HTML5, um den Effekt fallender Blätter zu erzielen

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

迷茫Original: 2017-03-26 15:41:343893Durchsuche

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Canvas implementiert einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz anNächster Artikel：Canvas implementiert einen kreisförmigen Fortschrittsbalken und zeigt einen numerischen Prozentsatz an

In Verbindung stehende Artikel

Mehr sehen