/*鼠标跟随效果*/
<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>