欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

位置属性 + 动画 = 飞舞的气泡

程序员文章站 2022-03-13 13:56:22
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Title</title>
    6. 

  6.     <style>
    7. 

  7.         #box {
    8. 

  8.             width: 500px;
    9. 

  9.             height: 500px;
    10. 

  10.             background: #EEEEEE;
    11. 

  11.             border: 10px solid #FE3232;
    12. 

  12.             position: relative;
    13. 

  13.             margin: 0 auto;
    14. 

  14.         }
    15. 

    16. 

  16.         .bool {
    17. 

  17.             border-radius: 50%;
    18. 

  18.             box-shadow: 2px 3px 5px #999999;
    19. 

  19.             position: absolute;
    20. 

  20.         }
    21. 

  21.     </style>
    22. 

  22. </head>
    23. 

  23. <body>
    24. 

  24. <button id="add">add</button>
    25. 

  25. <div id="box">
    26. 

  26. </div>
    27. 

  27. <script>
    28. 

  28.     function get_rand(little, big) {
    29. 

  29.         return Math.floor(Math.random() * (big - little + 1)) + little;
    30. 

  30.     }
    31. 

    32. 

  32.     var colorArr = [
    33. 

  33.         '#FE3232',
    34. 

  34.         '#ccdd22',
    35. 

  35.         '#223355',
    36. 

  36.         '#22aa66',
    37. 

  37.         '#cc6699',
    38. 

  38.         '#123456',
    39. 

  39.         '#987654',
    40. 

  40.         '#FEDCBA',
    41. 

  41.         '#AB39EE',
    42. 

  42.         '#985421'
    43. 

  43.     ]
    44. 

  44.     var boxObj = document.getElementById('box');
    45. 

  45.     var addObj = document.getElementById('add');
    46. 

    47. 

  47.     addObj.onclick = function () {
    48. 

  48.         var nObj = document.createElement('div');
    49. 

  49.         var wh = get_rand(10, 50);
    50. 

  50.         nObj.style.width = wh + 'px';
    51. 

  51.         nObj.style.height = wh + 'px';
    52. 

  52.         nObj.style.background = colorArr[get_rand(0, 9)];
    53. 

  53.         var top = boxObj.clientHeight / 2 - nObj.offsetHeight / 2;
    54. 

  54.         var left = boxObj.clientWidth / 2 - nObj.offsetWidth / 2;
    55. 

  55.         nObj.style.top = top + 'px';
    56. 

  56.         nObj.style.left = left + 'px';
    57. 

  57.         nObj.className = 'bool';
    58. 

  58.         boxObj.appendChild(nObj);
    59. 

  59.         var xx = get_rand(1, 10);
    60. 

  60.         var yy = get_rand(1, 10);
    61. 

    62. 

  62.         setInterval(function () {
    63. 

  63.             top += xx;
    64. 

  64.             left += yy;
    65. 

    66. 

  66.             if (top > boxObj.clientHeight - nObj.offsetHeight || top < 0) {
    67. 

  67.                 xx = -xx;
    68. 

  68.             }
    69. 

  69.             if (left > boxObj.clientWidth - nObj.offsetWidth || left < 0) {
    70. 

  70.                 yy = -yy;
    71. 

    72. 

  72.             }
    73. 

  73.             nObj.style.top = top + 'px';
    74. 

  74.             nObj.style.left = left + 'px';
    75. 

  75.         }, 50)
    76. 

  76.     }
    77. 

    78. 

    79. 

  79. </script>
    80. 

  80. </body>
    81. 

  81. </html>
    82.

位置属性 + 动画 = 飞舞的气泡

上一篇： 不借助 Docker Desktop 在Mac上开发容器应用

下一篇： 如何画好动漫人物构图？2人到36人的环状构图参考

推荐阅读