Image placeholder

9种图标悬停效果

Image placeholder
F2EX 2017-08-20

使用 CSS 过渡动画打造的9套简单的圆形图标悬停效果。

这些示例是利用伪元素,然后使用 CSS 过渡动画来创建一个简单而时尚的效果。对于图标,使用图标字体会是一个很好的选择。

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);
	}
}

就这么简单!

注意:圆形伪元素(边框半径:50%)上的虚线边框在 FireFox 21.0 中不起作用(效果4)。


2017-09-02