index.html

<br>
<h3>Click mark</h3>
<p> By <a href="https://twitter.com/JesGraPa" target="_blank">@JesGraPa</a> - <a href="http://codepen.io/JesGraPa/" target="_blank">More Pens</a></p>

<div id="mousemark"></div>
<h1>Click anywhere</h1>

Mark-of-the-mouse-click.markdown

Mark of the mouse click

Use Jquery to mark of the mouse click with an animated div.

Forked from JesGraPa's Pen Mark of the mouse click.

A Pen by Captain Anonymous on CodePen.

License.

script.js

	$(document).ready(function(){

		$('body').on("mouseup",function(){
			$('#mousemark').removeClass("click");
		});

		$('body').on('click', function(e){
		    $('#mousemark').css({
		       left:  e.pageX,
		       top:   e.pageY
		    });
			$('#mousemark').addClass("click");
		});

	})

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:400,100);
*{
		margin:0;
		padding:0;
		font-family: "Lato";
		text-align: center;
     color:#333;
     font-weight: normal;
	}
	html,body{
		width: 100%;
		height: 100%;
		background: #9ACC5F;
	}
  p{  font-size: 13px;}
	h1{
		text-align: center;
		font-weight: 100;
		font-size: 50px;
		line-height: 0 !important;
		width: 100%;
		top: 50%;
		position: absolute;
	}
	#mousemark{
		opacity: 0;
		position: absolute;
		width: 1px;
		height: 1px;
		border-radius: 100px;
		border: 1px solid #666;
		text-align: center;
	}
	#mousemark.click{
		animation:anim 0.5s;
		-webkit-animation:anim 0.5s;
	}
	@keyframes anim{
		50%{
			width: 50px;
			height: 50px;
			margin-top: -25px;
			margin-left: -25px;
			opacity: 0.8;
		}
		100%{
			opacity: 0;
		}
	}
	@-webkit-keyframes anim{
		50%{
			width: 50px;
			height: 50px;
			margin-top: -25px;
			margin-left: -25px;
			opacity: 0.8;
		}
		100%{
			opacity: 0;
		}
	}