Question

我喜欢在 Codepen 上发现的效果。

我想知道是否可以更改此设置，以便我可以使用其他颜色的商标而不是不同的颜色点。

我假设但是我要更改的代码是：

var color = "background: rgb(" + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + ");";

var sizeInt = getRandomInt(10, 30);
size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";

我正在考虑使用指向我的徽标的链接来更改rgb("+getRandomInt(0,255)+"，但不确定如何处理

我对JS不太满意，所以任何帮助都会很棒：-）

Answer 1

我可以有自己的品牌徽标，也许是不同的颜色。

是的，您可以使用字体图标将品牌徽标放在鼠标上。

查看演示

var mousePos = {},
  getRandomInt = (min, max) => {
    return Math.round(Math.random() * (max - min + 1)) + min;
  },
  getRandomColor = () => {
    return `#${((1 << 24) * Math.random() | 0).toString(16)}`;
  };

$(window).mousemove(function(e) {
  mousePos.x = e.pageX;
  mousePos.y = e.pageY;
});

$(window).mouseleave(function(e) {
  mousePos.x = -1;
  mousePos.y = -1;
});

var draw = setInterval(function() {
  if (mousePos.x > 0 && mousePos.y > 0) {

    var range = 15,
      color = `color:${getRandomColor()};`,
      sizeInt = getRandomInt(10, 30),
      left = "left: " + getRandomInt(mousePos.x - range - sizeInt, mousePos.x + range) + "px;",
      top = "top: " + getRandomInt(mousePos.y - range - sizeInt, mousePos.y + range) + "px;",
      size = `height:${sizeInt}px;width:${sizeInt}px;`;

    $(`<div class="ball" style="${left + top + color + size}"><i class="fa fa-stack-overflow"></i></div>`).appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
      $(this).remove();
    });
  }
}, 1);

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
  background: #3c3c3c;
  font-family: "Open Sans";
}

#wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#wrap p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: rgba(255, 255, 255, .5);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
}

.ball {
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
  animation: implode 1s ease-in-out;
  animation-fill-mode: both;
  opacity: .5;
}

@keyframes implode {
  100% {
    transform: scale(0)
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrap">
  <p>move the cursor around the screen</p>
</div>

*您可以使用在线icomoon

创建自己的pictos图标

在现有codepen中，您也可以这样使用

background-image: url('your image url or path here');//or
background: url('your image url or path here');

更改鼠标悬停时的粒子效果

1 个答案: