鼠标跟随特效
/*鼠标跟随效果*/ <style type="text/css"> .draw { position: fixed; width: 1px; line-height: 1px; pointer-events: none; } @keyframes floatOne { 0% { opacity:0.8; } 50% { opacity:0.8; } 100% { opacity:0; transform:translate3D(0, -20px, 0) scale(5) rotate(45deg); } } </style> <script type="text/javascript"> var H = 0; $(document).bind('mousemove touchmove',function(e) { e.preventDefault(); var drawSize = 10; var drawType = '❉'; var floatType = 'floatOne'; var xPos = e.originalEvent.pageX; var yPos = e.originalEvent.pageY; $('body').append('<div class="draw" style=" font-size:'+drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:#FFFF00;">'+drawType+'</div>'); $('.draw').each(function() { var div = $(this); setTimeout(function() {$(div).remove();},800); }); }); </script>