LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


CSS
body{background:#01bce1;}

#mouse-icon{
	width:17px; height:25px;
	display:block;
	margin:-20px 0 0 -7px;
	border:3px solid #fff;
	position:absolute;
	z-index:700;
	opacity:0.5;
	top:50%; left:50%;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	-moz-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#mouse-icon::before{
	content:'SCROLL';
	width:60px;
	display:block;
	margin:0 0 0 -30px;
	position:absolute;
	left:50%;
	text-align:center;
	font:1em 'Dosis', sans-serif;
	color:#fff;
	font-weight:700;
	opacity:0;
	-webkit-transform: scaleX(0);
 	-moz-transform: scaleX(0);
 	-o-transform: scaleX(0);
 	transform: scaleX(0);
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#mouse-icon:hover{
	opacity:1;
  cursor:pointer;
}

#mouse-icon:hover:before{
	margin-top:-30px;
	opacity:1;
	-webkit-transform: scaleX(1);
 	-moz-transform: scaleX(1);
 	-o-transform: scaleX(1);
 	transform: scaleX(1);
}

#scroll-wheel{
  	width:5px;
  	height:6px;
  	display:block;
  	position:absolute;
  	top:5px;
  	left:6px;
  	background:#fff;
  	-webkit-border-radius:3px;
  	-moz-border-radius:3px;
  	-o-border-radius:3px;
  	border-radius:3px;
  	-webkit-animation: scrollWheel 1s linear infinite;
	-moz-animation: scrollWheel 1s linear infinite;
	-o-animation: scrollWheel 1s linear infinite;
	animation: scrollWheel 1s linear infinite;
}

@-webkit-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}

@-moz-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}

@-o-keyframes scrollWheel {
	0%   { top:5px; opacity:1; }
	100% { top:20px; opacity:0; }
}
Host Instantly Drag and Drop Website Builder

 

Description

Just a little icon to indicate that the user should scroll, with additional animation on hover.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID