耀极客论坛

 找回密码
 立即注册
查看: 668|回复: 0

通过JavaScript实现动态圣诞树详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 01:06:44 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍几个好看的基于HTML+CSS+JS的圣诞树,希望圣诞节那天圣诞老爷爷能把我喜欢的你塞到我床上。感兴趣的小伙伴可以跟随小编一起学习一下

一、只使用 CSS 制作的动画圣诞树
  演示地址:http://haiyong.site/christmastree1(建议使用电脑打开,没做响应式手机端会有些变形,或者可以看看后面的圣诞树)

  HTML代码:
  这里的HTML代码是完整无删减的
  1. ‹div class="card-container">
  2.   ‹div class="snow-flakes-1">‹/div>
  3.   ‹div class="snow-flakes-2">‹/div>
  4.   ‹h2>接下来是雪花,圣诞树,新年和‹/h2>
  5.   ‹h1>更好的我们‹/h1>
  6.   ‹div class="tree-container">
  7.     ‹div class="ball-0">‹/div>
  8.     ‹div class="tree-p1">
  9.       ‹ul>
  10.         ‹li>
  11.           ‹div class="xmas-ball ball-1">‹/div>
  12.           ‹div class="tree-left-branch">‹/div>
  13.         ‹/li>
  14.         ‹li>‹div class="tree-right-branch">‹/div>‹/li>
  15.       ‹/ul>
  16.     ‹/div>
  17.     ‹div class="tree-p2">
  18.       ‹ul>
  19.         ‹li>
  20.           ‹div class="xmas-ball ball-2">‹/div>
  21.           ‹div class="tree-left-branch">‹/div>
  22.         ‹/li>
  23.         ‹li>
  24.           ‹div class="xmas-ball ball-3">‹/div>
  25.           ‹div class="tree-right-branch">‹/div>
  26.         ‹/li>
  27.       ‹/ul>
  28.     ‹/div>
  29.     ‹div class="tree-p3">
  30.       ‹ul>
  31.         ‹li>
  32.           ‹div class="xmas-ball ball-6">‹/div>
  33.           ‹div class="tree-left-branch">‹/div>
  34.         ‹/li>
  35.         ‹li>
  36.           ‹div class="xmas-ball ball-5">‹/div>
  37.           ‹div class="xmas-ball ball-4">‹/div>
  38.           ‹div class="tree-right-branch">‹/div>
  39.         ‹/li>
  40.       ‹/ul>
  41.     ‹/div>
  42.     ‹div class="tree-p4">
  43.       ‹ul>
  44.         ‹li>
  45.           ‹div class="xmas-ball ball-7">‹/div>
  46.           ‹div class="xmas-ball ball-8">‹/div>
  47.           ‹div class="tree-left-branch">‹/div>
  48.         ‹/li>
  49.         ‹li>
  50.           ‹div class="xmas-ball ball-9">‹/div>
  51.           ‹div class="xmas-ball ball-10">‹/div>
  52.           ‹div class="tree-right-branch stubborn">‹/div>
  53.         ‹/li>
  54.       ‹/ul>
  55.     ‹/div>
  56.     ‹div class="wood">‹/div>
  57.     ‹div class="presents">
  58.       ‹div class="present-container-1">
  59.         ‹div class="tie">‹/div>
  60.         ‹div class="lid">‹/div>
  61.         ‹div class="box">‹/div>
  62.       ‹/div>
  63.       ‹div class="present-container-2">
  64.         ‹div class="tie">‹/div>
  65.         ‹div class="lid">‹/div>
  66.         ‹div class="box">‹/div>
  67.       ‹/div>
  68.     ‹/div>
  69.   ‹/div>
  70.   ‹h3>圣诞节快乐!‹/h3>
  71.   ‹p>‹span>from haiyong‹/span>‹/p>
  72. ‹/div>
复制代码
  CSS主要代码
  CSS比较多,我截取了部分主要代码
  1. body {
  2.   height: 100vh;
  3.   display: flex;
  4.   justify-content: center;
  5.   align-items: center;
  6.   color: #000;
  7. }
  8. ul {
  9.   list-style-type: none;
  10. }
  11. ul li {
  12.   display: inline-block;
  13. }
  14. h1 {
  15.   font-family: "Mountains of Christmas", cursive;
  16.   font-size: 42px;
  17.   line-height: 60px;
  18.   -webkit-background-clip: text;
  19.   -webkit-text-fill-color: transparent;
  20. }
  21. h1::before, h1::after {
  22.   content: "❆";
  23.   margin: 0 10px;
  24. }
  25. h2 {
  26.   font-family: "Source Sans Pro", sans-serif;
  27.   font-size: 14px;
  28.   text-transform: uppercase;
  29.   letter-spacing: 2px;
  30. }
  31. h3 {
  32.   font-family: "Open Sans Condensed", sans-serif;
  33.   font-weight: 300;
  34.   font-size: 18px;
  35.   letter-spacing: 2px;
  36.   margin-bottom: 5px;
  37. }
  38. p {
  39.   font-family: "Dancing Script", cursive;
  40.   font-size: 20px;
  41.   font-weight: 700;
  42. }
  43. span {
  44.   font-family: "Roboto", sans-serif;
  45.   font-size: 14px;
  46.   font-weight: 400;
  47. }
  48. .card-container {
  49.   height: 675px;
  50.   width: 675px;
  51.   padding: 30px;
  52.   background-color: rgba(255, 255, 255, 0.6);
  53.   border: 8px double #fff;
  54.   border-radius: 20px;
  55.   text-align: center;
  56.   border-radius: 50%;
  57.   -webkit-border-radius: 50%;
  58.   overflow: hidden;
  59.   position: relative;
  60.   -webkit-mask-image: -webkit-radial-gradient(white, black);
  61. }
复制代码
二、只使用 CSS 制作的螺旋圣诞树
  演示地址:http://haiyong.site/christmastree2(在手机端和PC端都可以完美响应)

  HTML代码
  1. ‹div class="tree">
  2.   ‹div class="tree__light">‹/div>
  3.   ‹div class="tree__light">‹/div>
  4.   ‹div class="tree__light">‹/div>
  5.   ‹div class="tree__light">‹/div>
  6.   ‹div class="tree__light">‹/div>
  7.   ‹div class="tree__light">‹/div>
  8.   ‹div class="tree__light">‹/div>
  9.   ‹!-- 一样的规律一直写到tree__light">‹/div>
  10.   ‹svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44">
  11.     ‹path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round">‹/path>
  12.   ‹/svg>
  13. ‹/div>
复制代码
  完整CSS代码
  复制粘贴即可
  1. * {
  2.   box-sizing: border-box;
  3. }
  4. body {
  5.   background: #233343;
  6.   min-height: 100vh;
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   perspective: 1200px;
  11.   transform-style: preserve-3d;
  12. }
  13. .tree {
  14.   position: relative;
  15.   height: 50vmin;
  16.   width: 25vmin;
  17.   transform-style: preserve-3d;
  18.   -webkit-animation: spin 2s infinite linear;
  19.           animation: spin 2s infinite linear;
  20. }
  21. .tree__light {
  22.   transform-style: preserve-3d;
  23.   position: absolute;
  24.   height: 1vmin;
  25.   width: 1vmin;
  26.   border-radius: 50%;
  27.   -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
  28.           animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
  29.   left: 50%;
  30.   transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
  31.   bottom: calc(var(--y, 0) * 1%);
  32. }
  33. .tree__star {
  34.   stroke-width: 5vmin;
  35.   stroke: #f5e0a3;
  36.   filter: drop-shadow(0 0 2vmin #fcf1cf);
  37.   height: 5vmin;
  38.   width: 5vmin;
  39.   overflow: visible !important;
  40.   bottom: 100%;
  41.   left: 50%;
  42.   transform: translate(-50%, 0);
  43.   position: absolute;
  44.   stroke-dasharray: 1000 1000;
  45.   fill: none;
  46.   -webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
  47.           animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
  48. }
  49. @-webkit-keyframes stroke {
  50.   from {
  51.     stroke-dashoffset: -1000;
  52.   }
  53. }
  54. @keyframes stroke {
  55.   from {
  56.     stroke-dashoffset: -1000;
  57.   }
  58. }
  59. @-webkit-keyframes spin {
  60.   to {
  61.     transform: rotateY(360deg);
  62.   }
  63. }
  64. @keyframes spin {
  65.   to {
  66.     transform: rotateY(360deg);
  67.   }
  68. }
  69. @-webkit-keyframes appear {
  70.   from {
  71.     opacity: 0;
  72.   }
  73. }
  74. @keyframes appear {
  75.   from {
  76.     opacity: 0;
  77.   }
  78. }
  79. @-webkit-keyframes flash {
  80.   0%, 100% {
  81.     background: #f00;
  82.   }
  83.   20% {
  84.     background: #fff;
  85.   }
  86.   40% {
  87.     background: #f00;
  88.   }
  89.   60% {
  90.     background: #fff;
  91.   }
  92.   80% {
  93.     background: #f00;
  94.   }
  95. }
  96. @keyframes flash {
  97.   0%, 100% {
  98.     background: #f00;
  99.   }
  100.   20% {
  101.     background: #fff;
  102.   }
  103.   40% {
  104.     background: #f00;
  105.   }
  106.   60% {
  107.     background: #fff;
  108.   }
  109.   80% {
  110.     background: #f00;
  111.   }
  112. }
复制代码
三、使用HTML+CSS+JS制作的圣诞树
  演示地址:http://haiyong.site/christmastree3(最好在PC端预览)

  完整CSS
  1. body {
  2.   background-color:#151522;
  3.   overflow: hidden;
  4.     display: flex;
  5.   align-items: center;
  6.   justify-content: center;
  7. }
  8. body,
  9. html {
  10.   height: 100%;
  11.   width: 100%;
  12.   margin: 0;
  13.   padding: 0;
  14. }
  15. svg{
  16.   width:90%;
  17.   height:90%;
  18.   visibility:hidden;
  19. }
复制代码
  部分JS
  1. MorphSVGPlugin.convertToPath('polygon');
  2. var xmlns = "http://www.w3.org/2000/svg",
  3.   xlinkns = "http://www.w3.org/1999/xlink",
  4. select = function(s) {
  5.     return document.querySelector(s);
  6.   },
  7.   selectAll = function(s) {
  8.     return document.querySelectorAll(s);
  9.   },
  10.   pContainer = select('.pContainer'),
  11.   mainSVG = select('.mainSVG'),
  12.   star = select('#star'),
  13.   sparkle = select('.sparkle'),
  14.   tree = select('#tree'),
  15.   showParticle = true,
  16.   particleColorArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
  17.   particleTypeArray = ['#star','#circ','#cross','#heart'],
  18.   particlePool = [],
  19.   particleCount = 0,
  20.   numParticles = 201
  21. gsap.set('svg', {
  22.   visibility: 'visible'
  23. })
  24. gsap.set(sparkle, {
  25. transformOrigin:'50% 50%',
  26. y:-100
  27. })
  28. let getSVGPoints = (path) => {
  29. let arr = []
  30. var rawPath = MotionPathPlugin.getRawPath(path)[0];
  31. rawPath.forEach((el, value) => {
  32. let obj = {}
  33. obj.x = rawPath[value * 2]
  34. obj.y = rawPath[(value * 2) + 1]
  35. if(value % 2) {
  36. arr.push(obj)
  37. }
  38. })
  39. return arr;
  40. }
  41. let treePath = getSVGPoints('.treePath')
  42. var treeBottomPath = getSVGPoints('.treeBottomPath')
  43. var mainTl = gsap.timeline({delay:0, repeat:0}), starTl;
  44. function flicker(p){
  45.   gsap.killTweensOf(p, {opacity:true});
  46.   gsap.fromTo(p, {
  47.     opacity:1
  48.   }, {
  49. duration: 0.07,
  50.     opacity:Math.random(),
  51.     repeat:-1
  52.   })
  53. }
  54. function createParticles() {
  55.   var i = numParticles, p, particleTl, step = numParticles/treePath.length, pos;
  56.   while (--i > -1) {
  57.    
  58.     p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
  59.     mainSVG.appendChild(p);
  60.     p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);
  61.     p.setAttribute('class', "particle");   
  62.     particlePool.push(p);
  63.     gsap.set(p, {
  64.                  x:-100,
  65.                  y:-100,
  66.    transformOrigin:'50% 50%'
  67.                  })
  68.   }
  69. }
  70. var getScale = gsap.utils.random(0.5, 3, 0.001, true);
  71. function playParticle(p){
  72.   if(!showParticle){return};
  73.   var p = particlePool[particleCount]
  74. gsap.set(p, {
  75. x: gsap.getProperty('.pContainer', 'x'),
  76. y: gsap.getProperty('.pContainer', 'y'),
  77. scale:getScale()
  78.     }
  79.     );
  80. var tl = gsap.timeline();
  81.   tl.to(p, {
  82. duration: gsap.utils.random(0.61,6),
  83.       physics2D: {
  84.         velocity: gsap.utils.random(-23, 23),
  85.         angle:gsap.utils.random(-180, 180),
  86.         gravity:gsap.utils.random(-6, 50)
  87.       },
  88.       scale:0,
  89.       rotation:gsap.utils.random(-123,360),
  90.       ease: 'power1',
  91.       onStart:flicker,
  92.       onStartParams:[p],
  93.       //repeat:-1,
  94.       onRepeat: (p) => {
  95.         gsap.set(p, {         
  96.             scale:getScale()
  97.         })
  98.       },
  99.       onRepeatParams: [p]
  100.     });
  101.   particleCount++;
  102.   particleCount = (particleCount >=numParticles) ? 0 : particleCount
  103.   
  104. }
  105. function drawStar(){
  106.   
  107.   starTl = gsap.timeline({onUpdate:playParticle})
  108.   starTl.to('.pContainer, .sparkle', {
  109. duration: 6,
  110. motionPath :{
  111. path: '.treePath',
  112.       autoRotate: false
  113. },
  114.     ease: 'linear'
  115.   })  
  116.   .to('.pContainer, .sparkle', {
  117. duration: 1,
  118.     onStart:function(){showParticle = false},
  119.     x:treeBottomPath[0].x,
  120.     y:treeBottomPath[0].y
  121.   })
  122.   .to('.pContainer, .sparkle',  {
  123. duration: 2,
  124.     onStart:function(){showParticle = true},
  125. motionPath :{
  126. path: '.treeBottomPath',
  127.       autoRotate: false
  128. },
  129.     ease: 'linear'   
  130.   },'-=0')
  131. .from('.treeBottomMask', {
  132. duration: 2,
  133.   drawSVG:'0% 0%',
  134.   stroke:'#FFF',
  135.   ease:'linear'
  136. },'-=2')  
  137.   
  138. }
  139. createParticles();
  140. drawStar();
  141. //ScrubGSAPTimeline(mainTl)
  142. mainTl.from(['.treePathMask','.treePotMask'],{
  143. duration: 6,
  144.   drawSVG:'0% 0%',
  145.   stroke:'#FFF',
  146. stagger: {
  147. each: 6
  148. },
  149.     duration: gsap.utils.wrap([6, 1,2]),
  150.   ease:'linear'
  151. })
  152. .from('.treeStar', {
  153. duration: 3,
  154.   //skewY:270,
  155.   scaleY:0,
  156.   scaleX:0.15,
  157.   transformOrigin:'50% 50%',
  158.   ease: 'elastic(1,0.5)'
  159. },'-=4')
  160. .to('.sparkle', {
  161. duration: 3,
  162.     opacity:0,
  163.     ease:"rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
  164.   },'-=0')
  165.   .to('.treeStarOutline', {
  166. duration: 1,
  167.     opacity:1,
  168.     ease:"rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
  169.   },'+=1')
  170. mainTl.add(starTl, 0)
  171. gsap.globalTimeline.timeScale(1.5);
复制代码
四、只使用 CSS 的流星圣诞树
  演示地址:http://haiyong.site/christmastree4(响应式的,手机和PC端都可预览)

  HTML代码
  1. ‹ul>
  2. ‹li>‹/li>
  3.   ‹li>‹/li>
  4.   ‹li>‹/li>
  5.   ‹li>‹/li>
  6.   ‹li>‹/li>
  7. ‹/ul>
  8. ‹ul>
  9. ‹!-- 此处省略256行 ‹li>‹/li> -->
  10. ‹/ul>
复制代码
  CSS代码
  1. :root {
  2.   --background:#3C3B3D;
  3. }
  4. body {
  5.   background: var(--background);
  6. }
  7. body ul {
  8.   padding: 0;
  9. }
  10. body ul li {
  11.   list-style: none;
  12. }
  13. body ul:nth-child(1) {
  14.   position: absolute;
  15.   top: 20vh;
  16.   left: 50%;
  17.   width: 1rem;
  18.   height: 1rem;
  19.   border-radius: 100%;
  20.   transform: translate(-50%, -50%);
  21. }
  22. body ul:nth-child(1) li {
  23.   position: absolute;
  24.   width: 0;
  25.   height: 0;
  26.   border-width: 0 0.5rem 1rem 0.5rem;
  27.   border-style: solid;
  28.   border-color: transparent;
  29.   border-bottom-color: #FFCE54;
  30.   transform-origin: 0.5rem 1rem;
  31. }
  32. body ul:nth-child(1) li:nth-child(0) {
  33.   transform: rotate(0deg);
  34. }
  35. body ul:nth-child(1) li:nth-child(1) {
  36.   transform: rotate(72deg);
  37. }
  38. body ul:nth-child(1) li:nth-child(2) {
  39.   transform: rotate(144deg);
  40. }
  41. body ul:nth-child(1) li:nth-child(3) {
  42.   transform: rotate(216deg);
  43. }
  44. body ul:nth-child(1) li:nth-child(4) {
  45.   transform: rotate(288deg);
  46. }
  47. body ul:nth-child(2) li {
  48.   position: absolute;
  49.   top: 20vh;
  50.   left: 50%;
  51.   width: 0.0625rem;
  52.   height: 60vh;
  53.   transform-origin: 50% 0%;
  54. }
  55. body ul:nth-child(2) li:nth-child(1) {
  56.   transform: rotate(4.9322004015deg);
  57. }
  58. body ul:nth-child(2) li:nth-child(1):before, body ul:nth-child(2) li:nth-child(1):after {
  59.   -webkit-animation-delay: -0.015625s;
  60.           animation-delay: -0.015625s;
  61. }
  62. body ul:nth-child(2) li:nth-child(2) {
  63.   transform: rotate(7.7960629984deg);
  64. }
  65. body ul:nth-child(2) li:nth-child(2):before, body ul:nth-child(2) li:nth-child(2):after {
  66.   -webkit-animation-delay: -0.03125s;
  67.           animation-delay: -0.03125s;
  68. }
  69. body ul:nth-child(2) li:nth-child(3) {
  70.   transform: rotate(10.5294548885deg);
  71. }
  72. body ul:nth-child(2) li:nth-child(3):before, body ul:nth-child(2) li:nth-child(3):after {
  73.   -webkit-animation-delay: -0.046875s;
  74.           animation-delay: -0.046875s;
  75. }
  76. /* ...... */
  77. /* 一样的规律,一直到第256 */
  78. body ul:nth-child(2) li:nth-child(256) {
  79.   transform: rotate(2deg);
  80. }
  81. body ul:nth-child(2) li:nth-child(256):before, body ul:nth-child(2) li:nth-child(256):after {
  82.   -webkit-animation-delay: -4s;
  83.           animation-delay: -4s;
  84. }
  85. body ul:nth-child(2) li:before, body ul:nth-child(2) li:after {
  86.   content: "";
  87.   position: absolute;
  88.   top: 0%;
  89.   -webkit-animation: fall 4s linear infinite;
  90.           animation: fall 4s linear infinite;
  91. }
  92. body ul:nth-child(2) li:before {
  93.   width: 0.0625rem;
  94.   height: 3rem;
  95.   background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
  96. }
  97. body ul:nth-child(2) li:after {
  98.   bottom: 0;
  99.   transform: translate(-50%, 3rem);
  100.   width: 0.1875rem;
  101.   height: 0.1875rem;
  102.   border-radius: 100%;
  103.   background: #ffce54;
  104. }
  105. body ul:nth-child(2) li:nth-child(4n):after {
  106.   background: #D8334A;
  107. }
  108. body ul:nth-child(2) li:nth-child(4n+1):after {
  109.   background: #FFCE54;
  110. }
  111. body ul:nth-child(2) li:nth-child(4n+2):after {
  112.   background: #2ECC71;
  113. }
  114. body ul:nth-child(2) li:nth-child(4n+3):after {
  115.   background: #5D9CEC;
  116. }
  117. @-webkit-keyframes fall {
  118.   0% {
  119.     opacity: 0;
  120.     top: 0%;
  121.   }
  122.   5% {
  123.     opacity: 0;
  124.   }
  125.   15%, 90% {
  126.     opacity: 1;
  127.   }
  128.   100% {
  129.     opacity: 0;
  130.     top: 100%;
  131.   }
  132. }
  133. @keyframes fall {
  134.   0% {
  135.     opacity: 0;
  136.     top: 0%;
  137.   }
  138.   5% {
  139.     opacity: 0;
  140.   }
  141.   15%, 90% {
  142.     opacity: 1;
  143.   }
  144.   100% {
  145.     opacity: 0;
  146.     top: 100%;
  147.   }
  148. }
复制代码
五、水晶球里的圣诞树
  演示地址:http://haiyong.site/christmastree5(响应式的,手机和PC端都可预览)

  CSS完整代码
  1. html, body {
  2.     margin:0;
  3.     width: 100%;
  4.     height: 100%;
  5.     position: absolute;
  6.     overflow: hidden;
  7.     background: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
  8. }
  9. .content {
  10.     text-align: center;
  11.     width: 100%;
  12. }
  13. svg {
  14.     max-width: 575px;
  15. }
  16. #canvas {
  17.     border-radius: 50%;
  18.     position: relative;
  19.     width: 310px;
  20.     height: 290px;
  21.     top: 10px;
  22.     left: 0px;
  23. }
  24. .canvas_container {
  25.     position: absolute;
  26.     width: 100%;
  27. }
  28. .draw_container {
  29.     position: absolute;
  30.     top: 50px;
  31.     width: 100%;
  32. }
复制代码
  JS完整代码
  1. $(function() {
  2.     var canvas = $("#canvas")[0];
  3.     var ctx = canvas.getContext("2d");
  4.     var WIDTH = 320;
  5.     var HEIGHT = 320;
  6.     canvas.width = WIDTH;
  7.     canvas.height = HEIGHT;
  8.     clearCanvas();
  9.     var particles = [];
  10.     for (var i = 0; i ‹ WIDTH; i++) {
  11.         particles.push({
  12.             x: Math.random() * WIDTH,
  13.             y: Math.random() * HEIGHT,
  14.             r: Math.random() * 2 + 1
  15.         })
  16.     }
  17.    
  18.     function draw() {
  19.         clearCanvas();
  20.         ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
  21.         ctx.beginPath();
  22.         for (let i = 0; i ‹ WIDTH; i++) {
  23.             let p = particles[i];
  24.             ctx.moveTo(p.x, p.y);
  25.             ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
  26.         }
  27.         ctx.fill();
  28.         update();
  29.     }
  30.    
  31.     function update() {
  32.         for (let i = 0; i ‹ WIDTH; i++) {
  33.             let p = particles[i];
  34.             p.y += p.r;
  35.             if (p.y > canvas.height) {
  36.                 particles[i] = {
  37.                     x: Math.random() * canvas.width,
  38.                     y: -10,
  39.                     r: p.r
  40.                 };
  41.             }
  42.         }
  43.     }
  44.     var timer = setInterval(draw, 50);
  45.     function clearCanvas() {
  46.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  47.     }
  48. })
复制代码
六、圣诞贺卡
  演示地址:http://haiyong.site/shengdanheka

  以上就是通过JavaScript实现动态圣诞树详解的详细内容,更多关于JavaScript圣诞树的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:34 , Processed in 0.082792 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表