0byt3m1n1-V2

Path: /home/bangtoey/domains/bangtoey.go.th/public_html/css2/ [ Home ]
File: text-an2.css
/* CSS Document */

//CONFIG
$time: 250ms;
$number: 3;
$ease: cubic-bezier(0.770, 0.000, 0.175, 1.000);
$move: 2em;
$color: blue;
$font: 'Roboto Condensed', sans-serif;

//STYLES
html{
	padding: 25vh 10vw;
	text-align: center;
}
c{
	cursor: pointer;
	font-family: $font;
	font-weight: 900;
	user-select: none;
	color: $color;
	font-size: 0;
	transform: translate3d(0,0,0);
	filter: blur(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	span{
		font-size: 40px;
		margin: 0;
		padding: 0;
		display: inline-block;
		position: relative;
		transition: transform $ease $time;
		padding: 0 0.1em;
		
		@for $i from 0 through $number{
			&:nth-child(#{$i}n){ transition-delay: $time*$i/$number;}
			&:nth-child(#{$i}n):after{ transition-delay: $time*$i/$number;}
		}
		&:after{
			content: '';
			position: absolute;
			top: 100%;
			left: -1%;
			width: 102%;
			height: $move;
			background: $color;
			transform-origin: top center;
			transform: scaley(0.1);
			transition: transform $ease $time;
		}
	}
	&:hover{
		span{
			transform: translateY(-$move/2);
			&:after{ transform: scaleY(1);}
		}
	}
	&:active{
		span{
			transform: translateY(0);	
			transition: transform $ease $time/2;
			transition-delay: 0 !important;
			&:after{
				transform: scaleY(0.5);
				transition: transform $ease $time/2;
				transition-delay: 0 !important;
			}
		}
	}
	
}