您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

简单好玩的鼠标经过图标时动画效果

发布时间:2016-02-29编辑:余斗文件大小:44KB阅读:(0)字号:
      今天为大家分享一组时尚而简单的鼠标经过图标动画效果。主要的原理是当经过图标或触发其伪元素时,利用css的transitionsanimations属性,来实现的一些互动动画效果。在此之前,本站也介绍了很多css伪元素的文章,如:动画条纹边框、伪元素的多重选择、制作时尚焦点图相框等等。 简单好玩的鼠标经过图标时动画效果   构建HTML基本结构   在本示例当中用到的HTML结构极其简单,在一个大的div容器中放了几个描文本,通过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>
     
      简单的动画效果示例   这只是本文章中的其中一个示例(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的动画效果就是这么简单,只需要给他相对应的属性值以及变换规则。接下来好好的欣赏这组简单的鼠标经过时动画效果吧。希望可以给你们带来启示。 简单好玩的鼠标经过图标时动画效果
    解压后的文件

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词transitions 动画效果
余斗余斗
  1. 转载请注明: 简单好玩的鼠标经过图标时动画效果_余斗余斗_鸿运国际手机登录首页
  2. 版权声明: 本站原创文章,由 发表在 Html5模版 分类下,于2016-02-29最后更新
一个摆动特效的404页面
30款CSS3实现的加载Loading时特效
手机扫一扫 随身带着看
鸿运国际手机登录首页