兔年大吉，来欣赏飘雪的兔兔🐰吧！

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

春节将至，掘金 过年气氛 格外充足，看到兔了个兔大赛，突然想到天上下兔兔(兔兔那么可爱(●'◡'●))，写了个简单示例，一起 在掘金过大年!!!

实现效果

看着飘下的掘金礼物和小兔子以及小图标，谁不夸一句可爱捏！

具体代码在码上掘金

实现思路

页面部分主要是一个背景色为 #e74c3c 的div, 加上两行字组成。

<div class="app">
  <h1>新年快乐，兔年大吉</h1>
  <h1 style="margin-top: 200px;">jym, 记得饺子啊</h1>
</div>

.app {
  height: 100vh;
  background-color:#e74c3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

JS 部分则有三部分组成

1. 第一部分是引用的 jQuery.
2. 第二部分是引用的 飘雪组件 的封装。
3. 第三部分就是主要的组件调用。

注意点： 其中掘金的马克杯和抱枕用的是掘金的图片，然后小兔子用的也是网上的图片。然后♥的图标，❄的图标用的则是font-awesome 的图标。

font-awesome 则是在资源依赖那里进行了引用。

重点部分介绍

主要为设置一个定时器，然后将创建的元素从页面上线性降落，到达底部之后进行元素移除。

return setInterval( function() {
  var startPosX = Math.random() * targetWidth - 100,
      opacity  = 0.5 + Math.random(),
      sizeFlake = settings.minSize + Math.random() * settings.maxSize,
      startPosY	= targetHeight - 20,
      endPosX = startPosX - 100 + Math.random() * 200,
      fallTime  = targetHeight * settings.fallTimeMultiplier + Math.random() * settings.fallTimeDifference,
      currentElement = settings.elements[Math.floor(Math.random()*settings.elements.length)];

  $element.clone().html(currentElement.html).appendTo(settings.target).css({
    'left': startPosX,
    'opacity': opacity,
    'font-size': sizeFlake,
    'width' : sizeFlake,
    'height': sizeFlake,
    'color': currentElement.color
  }).animate({
    top: startPosY,
    left: endPosX,
    opacity: 1
  }, fallTime,'linear', function() {
    // Change this to handle fall end action
    $(this).fadeOut('fast', function() {
      $(this).remove();
    })
  })
}, settings.spawnInterval);
	

传入的 elements 为想要漂浮降落的元素的数组组成。 本文传入的为 图片 和 icon 图标。

欢迎互动

希望大家新年愉快，美梦成真，年年好运来。 也希望动动小手给个赞。👍