文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用HTML5实现树叶飘落动画

2024-04-02 19:55

关注

本篇内容主要讲解“怎么用HTML5实现树叶飘落动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用HTML5实现树叶飘落动画”吧!

这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用这款动画。

怎么用HTML5实现树叶飘落动画

源码下载 演示地址

HTML代码

XML/HTML Code复制内容到剪贴板

  1. <div id="container">  

  2.   <!-- The container is dynamically populated using the init function in leaves.js -->  

  3.   <!-- Its dimensions and position are defined using its id selector in leaves.css -->  

  4.   <div id="leafContainer"></div>  

  5.   <!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->  

  6.   <div id="message">  

  7.    <em>这是基于webkit的落叶动画</em>  

  8.   </div>  

  9. </div>  

CSS代码

CSS Code复制内容到剪贴板

  1. #container {   

  2.     position: relative;   

  3.     height: 700px;   

  4.     width: 500px;   

  5.     margin: 10px auto;   

  6.     overflow: hidden;   

  7.     border: 4px solid #5C090A;   

  8.     background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;   

  9. }   

  10.   

  11.   

  12. #leafContainer    

  13. {   

  14.     position: absolute;   

  15.     width: 100%;   

  16.     height: 100%;   

  17. }   

  18.   

  19.   

  20. #message   

  21. {   

  22.     position: absolute;   

  23.     top: 160px;   

  24.     width: 100%;   

  25.     height: 300px;   

  26.     background:transparent url('images/textBackground.png') repeat-x center;   

  27.     color: #5C090A;   

  28.     font-size: 220%;   

  29.     font-family: 'Georgia';   

  30.     text-align: center;   

  31.     padding: 20px 10px;   

  32.     -webkit-box-sizing: border-box;   

  33.     -webkit-background-size: 100% 100%;   

  34.     z-index: 1;   

  35. }   

  36.   

  37. p {   

  38.   margin: 15px;   

  39. }   

  40.   

  41. a   

  42. {   

  43.   color: #5C090A;   

  44.   text-decoration: none;   

  45. }   

  46.   

  47.   

  48. em    

  49. {   

  50.     font-weight: bold;   

  51.     font-style: normal;   

  52. }   

  53.   

  54. .phone {   

  55.   font-size: 150%;   

  56.   vertical-align: middle;   

  57. }   

  58.   

  59.   

  60. #leafContainer > div    

  61. {   

  62.     position: absolute;   

  63.     width: 100px;   

  64.     height: 100px;   

  65.   

  66.       

  67.     -webkit-animation-iteration-count: infinite, infinite;   

  68.     -webkit-animation-direction: normal, normal;   

  69.     -webkit-animation-timing-function: linear, ease-in;   

  70. }   

  71.   

  72.   

  73. #leafContainer > div > img {   

  74.      position: absolute;   

  75.      width: 100px;   

  76.      height: 100px;   

  77.   

  78.       

  79.      -webkit-animation-iteration-count: infinite;   

  80.      -webkit-animation-direction: alternate;   

  81.      -webkit-animation-timing-function: ease-in-out;   

  82.      -webkit-transform-origin: 50% -100%;   

  83. }   

  84.   

  85.   

  86. @-webkit-keyframes fade   

  87. {   

  88.       

  89.     0%   { opacity: 1; }   

  90.     95%  { opacity: 1; }   

  91.     100% { opacity: 0; }   

  92. }   

  93.   

  94.   

  95. @-webkit-keyframes drop   

  96. {   

  97.       

  98.     0%   { -webkit-transform: translate(0px, -50px); }   

  99.       

  100.     100% { -webkit-transform: translate(0px, 650px); }   

  101. }   

  102.   

  103.   

  104. @-webkit-keyframes clockwiseSpin   

  105. {   

  106.       

  107.     0%   { -webkit-transform: rotate(-50deg); }   

  108.       

  109.     100% { -webkit-transform: rotate(50deg); }   

  110. }   

  111.   

  112.   

  113. @-webkit-keyframes counterclockwiseSpinAndFlip    

  114. {   

  115.       

  116.     0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }   

  117.       

  118.     100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }   

  119. }   

JavaScript代码

JavaScript Code复制内容到剪贴板

  1.   

  2. const NUMBER_OF_LEAVES = 30;   

  3.   

  4.   

  5. function init()   

  6. {   

  7.       

  8.     var container = document.getElementById('leafContainer');   

  9.       

  10.     for (var i = 0; i < NUMBER_OF_LEAVES; i++)    

  11.     {   

  12.         container.appendChild(createALeaf());   

  13.     }   

  14. }   

  15.   

  16.   

  17. function randomInteger(low, high)   

  18. {   

  19.     return low + Math.floor(Math.random() * (high - low));   

  20. }   

  21.   

  22.   

  23. function randomFloat(low, high)   

  24. {   

  25.     return low + Math.random() * (high - low);   

  26. }   

  27.   

  28.   

  29. function pixelValue(value)   

  30. {   

  31.     return value + 'px';   

  32. }   

  33.   

  34.   

  35.   

  36. function durationValue(value)   

  37. {   

  38.     return value + 's';   

  39. }   

  40.   

  41.   

  42. function createALeaf()   

  43. {   

  44.       

  45.     var leafDiv = document.createElement('div');   

  46.     var image = document.createElement('img');   

  47.   

  48.       

  49.     image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';   

  50.   

  51.     leafDiv.style.top = "-100px";   

  52.   

  53.       

  54.     leafDiv.style.left = pixelValue(randomInteger(0, 500));   

  55.   

  56.       

  57.     var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';   

  58.   

  59.       

  60.     leafDiv.style.webkitAnimationName = 'fade, drop';   

  61.     image.style.webkitAnimationName = spinAnimationName;   

  62.   

  63.       

  64.     var fadeAndDropDuration = durationValue(randomFloat(5, 11));   

  65.   

  66.       

  67.     var spinDuration = durationValue(randomFloat(4, 8));   

  68.       

  69.     leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;   

  70.   

  71.     var leafDelay = durationValue(randomFloat(0, 5));   

  72.     leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;   

  73.   

  74.     image.style.webkitAnimationDuration = spinDuration;   

  75.   

  76.     // add the <img> to the <div>   

  77.     leafDiv.appendChild(image);   

  78.   

  79.       

  80.     return leafDiv;   

  81. }   

  82.   

  83.   

  84. window.addEventListener('load', init, false);   

到此,相信大家对“怎么用HTML5实现树叶飘落动画”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯