HTML5效果：实现树叶飘落
生活随笔
收集整理的這篇文章主要介紹了
HTML5效果：实现树叶飘落
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現如圖所示的東西效果（落葉下落）：
html代碼：
<!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代碼：
body {background-color: #4E4226; }#container {position: relative;height: 700px;width: 500px;margin: 10px auto;overflow: hidden;border: 4px solid #5C090A;background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left; }#leafContainer {position: absolute;width: 100%;height: 100%; }#message{position: absolute;top: 160px;width: 100%;height: 300px;background:transparent url('images/textBackground.png') repeat-x center;color: #5C090A;font-size: 220%;font-family: 'Georgia';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 > div {position: absolute;width: 100px;height: 100px;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-timing-function: linear; }#leafContainer > div > 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代碼：
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');leafDiv.style.top = "-100px";leafDiv.style.left = pixelValue(randomInteger(0, 500));leafDiv.style.webkitAnimationName = 'fade, drop';var fadeAndDropDuration = durationValue(randomFloat(5, 11));leafDiv.style.webkitAnimationDuration = fadeAndDropDuration ', ' fadeAndDropDuration;var leafDelay = durationValue(randomFloat(0, 5));leafDiv.style.webkitAnimationDelay = leafDelay ', ' leafDelay;var image = document.createElement('img');image.src = 'images/realLeaf' randomInteger(1, 5) '.png';var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';image.style.webkitAnimationName = spinAnimationName;var spinDuration = durationValue(randomFloat(4, 8));image.style.webkitAnimationDuration = spinDuration;leafDiv.appendChild(image);return leafDiv; }window.addEventListener('load', init, false);?轉載地址：http://www.html5tricks.com/css3-fall-leaves.html
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的HTML5效果：实现树叶飘落的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bootstrap源码之滚动监听组件sc
- 下一篇： 移动前端—H5实现图片先压缩再上传