icon interaction

rg-icon.html

<section>
	<h1>Icons</h1>
	<ul class="items">
		<li>
			<div>
				<span class="rg-icon hamburger"><i>list</i></span>
			</div>
		</li>
		<li>
			<div><span class="rg-icon cross"><i>add/close</i></span></div>
		</li>
	</ul>
</section>

<p><br /></p>

<p>not support browser : ie6~9</p>

rg-icon.scss

/* layout */
.items {
	margin: 0;
	padding: 0;
	list-style: none;
	li {
		float: left;
		margin: 0 2px 2px 0;
	}
	div {
		position: relative;
		width: 150px;
		height: 150px;
		background: #238bd5;
	}
	.rg-icon {
		position: absolute;
		left: 50%;
		top: 50%;
		&.hamburger {margin-top: -25px; margin-left: -40px;}
		&.cross {margin-top: -40px; margin-left: -40px;}
	}
	&:after {
		content: '';
		display: block;
		clear: both;
	}
}


/* icon */
.rg-icon {
	$activeMethod : ":hover"; // set ":hover" or ".avtive" classname
	$transition : all .25s ease-out;
	$lineColor : #fff;
	$lineWeight : 6px;

	position: relative;
	display: block;

	&:before, &:after {
		content: '';
		transition: $transition;
	}

	&.hamburger {
		$width : 80px;
		$height : 50px;

		width: $width;
		height: $height;

		i, &:before, &:after {
			position: absolute;
			display: block;
			width: 100%;
			height: $lineWeight;
			left: 0;
			background: $lineColor;
		}
		i {
			top: 50%;
			margin-top: 0 - ($lineWeight * 0.5);
			text-indent: -9999px;
			transition: opacity .15s ease-out;
		}
		&:before {top: 0;}
		&:after {bottom: 0;}
		&#{$activeMethod} {
			i {opacity: 0;}
			&:before {
				top: 50%;
				margin-top: 0 - ($lineWeight * 0.5);
				transform: rotate(45deg);
			}
			&:after {
				bottom: 50%;
				margin-bottom: 0 - ($lineWeight * 0.5);
				transform: rotate(-45deg);
			}
		}
	}
	&.cross {
		$width : 80px;
		$height : 80px;

		width: $width;
		height: $height;

		i {display: none;}
		&:before, &:after {
			position: absolute;
			display: block;
			left: 50%;
			top: 50%;
			background: $lineColor;
			transition: $transition;
		}
		&:before {
			width: 100%;
			left: 0;
			margin-top: 0 - ($lineWeight * 0.5);
			height: $lineWeight;
		}
		&:after {
			width: $lineWeight;
			top: 0;
			margin-left: 0 - ($lineWeight * 0.5);
			height: 100%;
		}
		&#{$activeMethod} {
			&:before, &:after {
				transform: rotate(45deg);
			}
		}
	}
}

아이콘이 활성화되었을때 일어나는 애니메이션 효과샘플

이런것들이 대부분 svg고, js코드가 많이 들어가서 html/css만 사용하여 간편하게 사용하기 위하여 만들었습니다.
ie8에서 작동이 안하며, 제대로 표시가 안되기 때문에 구버전 브라우저에서 별도의 조취가 필요합니다.