鼠标点击特效
1.心形效果
<!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); } catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script>
2.文字效果
<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
3.烟花效果
<!--给WordPress网站添加鼠标点击爆炸五颜六色特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://www.ixianzong.com/wp-content/themes/begin/js/djtx.js"></script>
鼠标移动特效
1.蒲公英效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>鼠标特效</title> </head> <body> <script src="js/jquery-2.2.0.min.js"></script> <script > var a_idx=0; jQuery(document).ready(function($){ addTips = function(e){ var a= new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var i=$("<span />").text(a[a_idx]); a_idx=(a_idx+1)%a.length; var x=e.pageX,y=e.pageY; i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top":y-20, "left":x, "position":"absolute", "font-weight":"bold", "color":"#ff6651" }); $("body").append(i); i.animate({"top": y-180,"opacity":0},1500,function(){i.remove()}) return false; } //绑定鼠标左键 $("body").click(addTips); //绑定鼠标左键 $("body").bind("contextmenu",addTips) }); </script> <script> function o(w,v,i){ return w.getAttribute(v)||i } function j(i){ return document.getElementsByTagName(i) } function l(){ var i=j("script"),w=i.length,v=i[w-1]; return {l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)} } function k(){ r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function b(){ e.clearRect(0,0,r,n); var w=[f].concat(t); var x,v,A,B,z,y; t.forEach(function(i){ i.x+=i.xa, i.y+=i.ya, i.xa*=i.x>r||i.x<0?-1:1, i.ya*=i.y>n||i.y<0?-1:1, e.fillRect(i.x-0.5,i.y-0.5,1,1); for(v=0;v<w.length;v++){ x=w[v]; if(i!==x&&null!==x.x&&null!==x.y){ B=i.x-x.x,z=i.y-x.y,y=B*B+z*z; y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke()) } } w.splice(w.indexOf(i),1) }),m(b) } var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n, m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){ window.setTimeout(i,1000/45) }, a=Math.random,f={x:null,y:null,max:20000}; u.className="particle_canvas"; var browserName = navigator.userAgent.toLowerCase(); if (/msie/i.test(browserName) && !/opera/.test(browserName)) { u.className += ' ie10_gte'; }; u.id=c; u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o; j("body")[0].appendChild(u); k(),window.onresize=k; window.onmousemove=function(i){ i=i||window.event, f.x=i.clientX, f.y=i.clientY }, window.onmouseout=function(){ f.x=null, f.y=null }; for(var t=[],p=0;s.n>p;p++){ var h=a()*r, g=a()*n, q=2*a()-1, d=2*a()-1; t.push({x:h,y:g,xa:q,ya:d,max:6000}) } setTimeout(function(){b()},100) </script> <style> .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out } @keyframes octocat-wave { 0%, 100% { transform: rotate(0) } 20%, 60% { transform: rotate(-25deg) } 40%, 80% { transform: rotate(10deg) } } @media (max-500px) { .github-corner:hover .octo-arm { animation: none } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out } } </style> </body> </html>
2.蜘蛛网效果
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>动态鼠标蜘蛛网特效</title> </head> <body> </body> <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> <script> ! function() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t.length, i = t[o - 1]; return { l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99) } } function o() { a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function i() { r.clearRect(0, 0, a, c); var n, e, t, o, m, l; s.forEach(function(i, x) { for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke())) }), x(i) } var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"), x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(n) { window.setTimeout(n, 1e3 / 45) }, w = Math.random, y = { x: null, y: null, max: 2e4 }; m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o, window.onmousemove = function(n) { n = n || window.event, y.x = n.clientX, y.y = n.clientY }, window.onmouseout = function() { y.x = null, y.y = null }; for (var s = [], f = 0; d.n > f; f++) { var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1; s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 }) } u = s.concat([y]), setTimeout(function() { i() }, 100) } (); </script> </html>