Maison > interface Web > Tutoriel H5 > Utilisez Html5 pour obtenir l'effet de feuilles qui tombent

Utilisez Html5 pour obtenir l'effet de feuilles qui tombent

迷茫
Libérer: 2017-03-26 15:41:34
original
3974 Les gens l'ont consulté

Pour obtenir l'effet comme indiqué sur l'image (feuilles qui tombent) :

Utilisez Html5 pour obtenir leffet de feuilles qui tombent

code html :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!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>

Copier après la connexion

code css :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

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

Copier après la connexion

Code js :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal