Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
icon interaction
<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>
/* 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);
}
}
}
}
@redgoose-dev

This comment has been minimized.

Copy link
Owner Author

redgoose-dev commented Jan 28, 2015

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.