极乐门资源网 Design By www.ioogu.com
这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。
源码下载 演示地址
HTML代码
XML/HTML Code复制内容到剪贴板- <div id="container">
- <!-- The container is dynamically populated using the init function in leaves.js -->
- <!-- Its dimensions and position are defined using its id selector in leaves.css -->
- <div id="leafContainer"></div>
- <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->
- <div id="message">
- <em>这是基于webkit的落叶动画</em>
- </div>
- </div>
CSS代码
CSS Code复制内容到剪贴板- #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;
- }
- /* Defines the position and dimensions of the leafContainer div */
- #leafContainer
- {
- position: absolute;
- width: 100%;
- height: 100%;
- }
- /* Defines the appearance, position, and dimensions of the message div */
- #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;
- }
- p {
- margin: 15px;
- }
- a
- {
- color: #5C090A;
- text-decoration: none;
- }
- /* Sets the color of the "Dino's Gardening Service" message */
- em
- {
- font-weight: bold;
- font-style: normal;
- }
- .phone {
- font-size: 150%;
- vertical-align: middle;
- }
- /* This CSS rule is applied to all div elements in the leafContainer div.
- It styles and animates each leafDiv.
- */
- #leafContainer > div
- {
- position: absolute;
- width: 100px;
- height: 100px;
- /* We use the following properties to apply the fade and drop animations to each leaf.
- Each of these properties takes two values. These values respectively match a setting
- for fade and drop.
- */
- -webkit-animation-iteration-count: infinite, infinite;
- -webkit-animation-direction: normal, normal;
- -webkit-animation-timing-function: linear, ease-in;
- }
- /* This CSS rule is applied to all img elements directly inside div elements which are
- directly inside the leafContainer div. In other words, it matches the 'img' elements
- inside the leafDivs which are created in the createALeaf() function.
- */
- #leafContainer > div > img {
- position: absolute;
- width: 100px;
- height: 100px;
- /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
- animations on each leaf.
- The createALeaf function in the Leaves.js file determines whether a leaf has the
- clockwiseSpin or counterclockwiseSpinAndFlip animation.
- */
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-direction: alternate;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-transform-origin: 50% -100%;
- }
- /* Hides a leaf towards the very end of the animation */
- @-webkit-keyframes fade
- {
- /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
- 0% { opacity: 1; }
- 95% { opacity: 1; }
- 100% { opacity: 0; }
- }
- /* Makes a leaf fall from -300 to 600 pixels in the y-axis */
- @-webkit-keyframes drop
- {
- /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
- 0% { -webkit-transform: translate(0px, -50px); }
- /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
- 100% { -webkit-transform: translate(0px, 650px); }
- }
- /* Rotates a leaf from -50 to 50 degrees in 2D space */
- @-webkit-keyframes clockwiseSpin
- {
- /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
- 0% { -webkit-transform: rotate(-50deg); }
- /* Rotate a leaf by 50 degrees in 2D space at the end of the animation */
- 100% { -webkit-transform: rotate(50deg); }
- }
- /* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
- @-webkit-keyframes counterclockwiseSpinAndFlip
- {
- /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
- 0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
- /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
- 100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
- }
JavaScript代码
JavaScript Code复制内容到剪贴板- /* Define the number of leaves to be used in the animation */
- const NUMBER_OF_LEAVES = 30;
- /*
- Called when the "Falling Leaves" page is completely loaded.
- */
- function init()
- {
- /* Get a reference to the element that will contain the leaves */
- var container = document.getElementById('leafContainer');
- /* Fill the empty container with new leaves */
- for (var i = 0; i < NUMBER_OF_LEAVES; i++)
- {
- container.appendChild(createALeaf());
- }
- }
- /*
- Receives the lowest and highest values of a range and
- returns a random integer that falls within that range.
- */
- function randomInteger(low, high)
- {
- return low + Math.floor(Math.random() * (high - low));
- }
- /*
- Receives the lowest and highest values of a range and
- returns a random float that falls within that range.
- */
- function randomFloat(low, high)
- {
- return low + Math.random() * (high - low);
- }
- /*
- Receives a number and returns its CSS pixel value.
- */
- function pixelValue(value)
- {
- return value + 'px';
- }
- /*
- Returns a duration value for the falling animation.
- */
- function durationValue(value)
- {
- return value + 's';
- }
- /*
- Uses an img element to create each leaf. "Leaves.css" implements two spin
- animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
- function determines which of these spin animations should be applied to each leaf.
- */
- function createALeaf()
- {
- /* Start by creating a wrapper div, and an empty img element */
- var leafDiv = document.createElement('div');
- var image = document.createElement('img');
- /* Randomly choose a leaf image and assign it to the newly created element */
- image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';
- leafDiv.style.top = "-100px";
- /* Position the leaf at a random location along the screen */
- leafDiv.style.left = pixelValue(randomInteger(0, 500));
- /* Randomly choose a spin animation */
- var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
- /* Set the -webkit-animation-name property with these values */
- leafDiv.style.webkitAnimationName = 'fade, drop';
- image.style.webkitAnimationName = spinAnimationName;
- /* Figure out a random duration for the fade and drop animations */
- var fadeAndDropDuration = durationValue(randomFloat(5, 11));
- /* Figure out another random duration for the spin animation */
- var spinDuration = durationValue(randomFloat(4, 8));
- /* Set the -webkit-animation-duration property with these values */
- leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
- var leafDelay = durationValue(randomFloat(0, 5));
- leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
- image.style.webkitAnimationDuration = spinDuration;
- // add the <img> to the <div>
- leafDiv.appendChild(image);
- /* Return this img element so it can be added to the document */
- return leafDiv;
- }
- /* Calls the init function when the "Falling Leaves" page is full loaded */
- window.addEventListener('load', init, false);
以上就是本文的全部内容,希望对大家学习有所帮助。
标签:
HTML5,树叶飘落,动画
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无逼真的HTML5树叶飘落动画的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]