• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

时尚而简单的鼠标经过图标动画效果

网络技术 云落 5年前 (2014-10-12) 605次浏览 1个评论 扫描二维码

今天就为大家分享一组时尚而简单的鼠标经过图标动画效果。主要的原理是当经过图标或触发其伪元素时,利用 css 的transitionsanimations属性,来实现的一些互动动画效果。在此之前,本站也介绍了很多 css 伪元素的文章,如:动画条纹边框伪元素的多重选择制作时尚焦点图相框等等。

时尚而简单的鼠标经过图标动画效果

查看预览下载附件

构建 HTML 基本结构

在本示例当中用到的 HTML 结构极其简单,在一个大的 div 容器中放了几个描文本,通过 css 的样式控制就可以制作出多种效果出来,如下:

<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>
简单的动画效果示例

这只是本文章中的其中一个示例(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);      }  }

上面的代码,只要你熟悉transitionsanimations这两个标签,那就很容易理解。当鼠标经过.hi-icon-effect-6 .hi-icon时背景变成白色 rgba(255,255,255,1),然后附带动画旋转transform: rotate()360 度。其他的示例,大家可以下载附件,好好的看看其中的代码。

查看预览下载附件

其实 css3 的动画效果就是这么简单,只需要给他相对应的属性值以及变换规则。接下来好好的欣赏这组简单的鼠标经过时动画效果吧。希望可以给你们带来启示。

译文:codrops

转载自:时尚而简单的鼠标经过图标动画效果


-- 完 --
时尚而简单的鼠标经过图标动画效果
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:时尚而简单的鼠标经过图标动画效果

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:时尚而简单的鼠标经过图标动画效果
喜欢 (6)
[sp91@qq.com]
分享 (0)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 嗯这个挺好
    阿瑞2017-08-22 13:03 回复 Linux | Chrome 53.0.2785.49