您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版
简单好玩的鼠标经过图标时动画效果
发布时间:2016-02-29编辑:余斗文件大小:44KB阅读:(0)字号: 大 中 小-
今天为大家分享一组时尚而简单的鼠标经过图标动画效果。主要的原理是当经过图标或触发其伪元素时,利用css的transitions和animations属性,来实现的一些互动动画效果。在此之前,本站也介绍了很多css伪元素的文章,如:动画条纹边框、伪元素的多重选择、制作时尚焦点图相框等等。

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
<a href="http://lailaikeji.com/spa" style="color:#91268F">"#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-mobile">Mobile</a>
<a href="http://lailaikeji.com/spa" style="color:#91268F">"#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-screen">Desktop</a>
<a href="http://lailaikeji.com/spa" style="color:#91268F">"#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-earth">Partners</a>
<a href="http://lailaikeji.com/spa" style="color:#91268F">"#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-support">Support</a>
<a href="http://lailaikeji.com/spa" style="color:#91268F">"#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-locked">Security</a>
</div>
.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);
}
}


解压后的文件
本站资源分享说明:
1、解压密码:yudouyudou
2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。
3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理!
4、如果网站分享资源涉及侵权等问题,可给余斗发邮件联系,邮箱yin0308@foxmail.com!
* 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 *
* 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词:transitions动画效果
上一篇:一个摆动特效的404页面
下一篇:30款CSS3实现的加载Loading时特效