smarti,스마트아이

아이콘 hover 효과모음

CSS 아이콘 hover 효과 모음

예제보기

 

다운로드

IconHoverEffects.zip

0.05MB

Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다.

해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다.

html

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
	<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
	<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
	<a href="#" class="hi-icon hi-icon-earth">Partners</a>
	<a href="#" class="hi-icon hi-icon-support">Support</a>
	<a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

 

CSS

.hi-icon-effect-6 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	transition: background 0.2s, color 0.2s;	
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
	animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

 

 

 

[디자인공부] - 미리캔버스로 멋진 썸네일 이미지 만들기

미리캔버스로 멋진 썸네일 이미지 만들기

[세상살이] - 인터넷이나 화면 녹화가 필요 하다면 Screencastify

인터넷이나 화면 녹화가 필요 하다면 Screencastify

[코딩공부] - CSS fixedNavigation2 예제 다운로드

CSS fixedNavigation2 예제 다운로드

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[세상살이] - 코로나 2단계 정리 (카페, 학원, 음식점, 피시방 등)

코로나 2단계 정리 (카페, 학원, 음식점, 피시방 등)