简单好玩的鼠标经过图标时动画效果
发布时间:2016-02-29编辑:余斗文件大小:44KB阅读:(0)字号: 大 中 小
【资源下载】 音乐、电影、剧集、课程、动漫、电子书、有声书、软件...都在这里! 【免费下载】 开通特权 ,各类千余TB网络资源免费下,日日更新,一次开通,终身可用!今天为大家分享一组时尚而简单的鼠标经过图标动画效果。主要的原理是当经过图标或触发其伪元素时,利用css的transitions和animations属性,来实现的一些互动动画效果。在此之前,本站也介绍了很多css伪元素的文章,如:动画条纹边框、伪元素的多重选择、制作时尚焦点图相框等等。
构建HTML基本结构
在本示例当中用到的HTML结构极其简单,在一个大的div容器中放了几个描文本,通过css的样式控制就可以制作出多种效果出来,如下:
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
<a href="#" 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="#" 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="#" 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="#" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="hi-icon hi-icon-locked">Security</a>
</div>
简单的动画效果示例
这只是本文章中的其中一个示例(6),主要的效果是旋转动画。
.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);
}
}
上面的代码,只要你熟悉transitions和animations这两个标签,那就很容易理解。当鼠标经过.hi-icon-effect-6 .hi-icon时背景变成白色rgba(255,255,255,1),然后附带动画旋转transform: rotate()360度。其他的示例,大家可以下载附件,好好的看看其中的代码。
其实css3的动画效果就是这么简单,只需要给他相对应的属性值以及变换规则。接下来好好的欣赏这组简单的鼠标经过时动画效果吧。希望可以给你们带来启示。
解压后的文件
资源均来自第三方,谨慎下载,前往第三方网站下载 解压密码:yudouyudou 解压密码:yudouyudou 解压密码:yudouyudou