js特效:点击鼠标位置漂浮心形图案随机变色

这篇笔记分享一个点击鼠标时漂浮随机变颜色的心形,用在网页上面非常漂亮。先看下预览图:

点击鼠标位置漂浮心形图案随机变色

JS特效源码:

  1. function (e, t, a) {
  2.     function n() {
  3.         c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
  4.     }
  5.     function r() {
  6.         for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
  7.         requestAnimationFrame(r)
  8.     }
  9.     function o() {
  10.         var t = "function" == typeof e.onclick && e.onclick;
  11.         e.onclick = function (e) {
  12.             t && t(), i(e)
  13.         }
  14.     }
  15.     function i(e) {
  16.         var a = t.createElement("div");
  17.         a.className = "heart", d.push({
  18.             el: a,
  19.             x: e.clientX - 5,
  20.             y: e.clientY - 5,
  21.             scale: 1,
  22.             alpha: 1,
  23.             color: s()
  24.         }), t.body.appendChild(a)
  25.     }
  26.     function c(e) {
  27.         var a = t.createElement("style");
  28.         a.type = "text/css";
  29.         try {
  30.             a.appendChild(t.createTextNode(e))
  31.         } catch (t) {
  32.             a.styleSheet.cssText = e
  33.         }
  34.         t.getElementsByTagName("head")[0].appendChild(a)
  35.     }
  36.     function s() {
  37.         return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
  38.     }
  39.     var d = [];
  40.     e.requestAnimationFrame = function () {
  41.         return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
  42.             setTimeout(e, 1e3 / 60)
  43.         }
  44.     }(), n()
  45. }(window, document);

如果您不想拷贝的话,也可以直接引用菠菜园为您提供的代码到自己的网页中。引用标签如下:

  1. <script type="text/javascript" src="https://www.zkii.net/download/code/js/love.js"></script>

 

 

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!