地址:http://www.cnblogs.com/sun927/p/5842852.html

几个别人总结的css3炫酷效果,有需要直接拿来用即可,包括以下几个效果:

1。悬浮时放大

2.悬浮时转一圈

3.自动不停转圈

4.颜色自动越来越浅

.four{animation:mymove linear 5s infinite;-webkit-animation:mymove linear 5s infinite; /*Safari and Chrome*/}
 
@keyframes mymove
{
    from {<br>          opacity:1;
        filter:Alpha(opacity=100);
        transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1);}
    to {<br>          opacity:0.1;
        filter:Alpha(opacity=10);
        transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -moz-transform:scale(1.1);
        -o-transform:scale(1.1);
        -ms-transform:scale(1.1);}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {
          opacity:1;
      filter:Alpha(opacity=100);
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -o-transform:scale(1);
      -ms-transform:scale(1);
     }
    to {
          opacity:0.1;
      filter:Alpha(opacity=10);
      transform:scale(1.1);
      -webkit-transform:scale(1.1);
      -moz-transform:scale(1.1);
      -o-transform:scale(1.1);
      -ms-transform:scale(1.1);
    }
}

h5 特效的更多相关文章

  1. 【干货】微信场景之H5页面制作免费工具大集合

    营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...

  2. 易企秀 we+ Maka 兔展 四大H5页面制作工具

    H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...

  3. css-单位%号-background-size-background-position-遁地龙卷风

    (-1)写在前面 我用的是chrome49,这篇是为后续做准备.重要性的调整以及毕业资料的整体导致最近没看JQuery和H5特效,以后只能晚上看了. (0)准备 div长宽都为300px,我们一张大小 ...

  4. Windjs应用

    一个异步的js类库,应用价值不大,所以代码也没在维护了.在做h5特效或者游戏动画方面有点用处. $await是Windjs的核心api.具体可以check 浅谈Jscex的$await语义及异步任务模 ...

  5. 我的web前端整理和学习

    知识点收藏:(边看.边记录.边写) 开直播学习:虎牙 待办事理>> 练习自我表达(把文章做成视频).技术学习总结(博客与公众号).跳出舒适圈. 前端知识体系:https://www.cnb ...

  6. Sqlite表结构读取工具,word批量转html,在线云剪贴板,文件批量提取工具;

    工欲善其事必先利其器,本周为您推荐工具排行 Sqlite表结构读取工具,word批量转html,在线云剪贴板,文件批量提取工具:     本周我们又要发干货了,准备好接受了吗? 为什么是干货,就是因为 ...

  7. 几个H5炫酷特效

    那H5里有哪些高级动效了?小编仔细体验了国内不少几个优秀H5页面作品,整理出下面几个H5页面特效.我们的H5作品如果能用上其中一两个,相信能增色不少! 1.粒子特效 —>>一键爆炸 模拟现 ...

  8. H5下拉刷新特效demo,动画流畅

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. css3波纹特效、H5实现动态波浪

    css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动 ...

随机推荐

  1. thinkPHP5 类库包注册

    tp5的类库包注册分为自动注册和手动注册 自动注册 我们只需要把自己的类库包目录放入EXTEND_PATH目录(默认为extend,可配置),就可以自动注册对应的命名空间,例如: 我们在extend目 ...

  2. 第一个go程序

    进入到工作空间中(我的是$HOME/go, 所以使用cd $HOME/go命令直接进入) 然后创建一个目录 src/hello( mkdir src/hello), 然后进入到该目录中(cd src/ ...

  3. 关于element中的父子组件的传值问题

    首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...

  4. [Agc028B]Removing Blocks_排列组合

    Removing Blocks 题目链接:https://atcoder.jp/contests/agc028/tasks/agc028_b 数据范围:略. 题解: 这种问题的第一步很套路,就是对于每 ...

  5. [转帖]强大的strace命令用法详解

    强大的strace命令用法详解 文章转自: https://www.linuxidc.com/Linux/2018-01/150654.htm strace是什么? 按照strace官网的描述, st ...

  6. 数据结构 -- 队列Queue

    一.队列简介 定义 队列(queue)在计算机科学中,是一种先进先出的线性表. 它只允许在表的前端进行删除操作,而在表的后端进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有 ...

  7. 关于MD5加盐使用

    md5 是一种数据加密,例子是对123456 进行了两次加盐 第一次是 inputPassToFormPass   salt是固定的 1a2b3c4d 第二次是  formPassToDBPass s ...

  8. mysql 连接远程连接服务器 1130错误

    今天在用sqlyog连接非本地的Mysql服务器的数据库,居然无法连接很奇怪,报1130错误, ERROR 1130: Host 192.168.3.100 is not allowed to con ...

  9. 「网络流 24 题」最长 k 可重区间集

    给定区间集合$I$和正整数$k$, 计算$I$的最长$k$可重区间集的长度. 区间离散化到$[1,2n]$, $S$与$1$连边$(k,0)$, $i$与$i+1$连边$(k,0)$, $2n$与$T ...

  10. 【GCN】图卷积网络初探——基于图(Graph)的傅里叶变换和卷积

    [GCN]图卷积网络初探——基于图(Graph)的傅里叶变换和卷积 2018年11月29日 11:50:38 夏至夏至520 阅读数 5980更多 分类专栏: # MachineLearning   ...