I have shared with you many button effects implemented in css3 before. Today I will share with you 9 mouseover icon hover effects based on CSS3 Transitions. This special effect is suitable for browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, and World Window. IE8 and below browsers are not supported. The renderings are as follows:
Online preview Source code download
Implemented code.
html code:
<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>
css3 code:
.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); }}via: http://www. w2bc.com/Article/20379
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
