@-webkit-keyframes bird{
0% {
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
-ms-transform: translate(0, 0);
transform: translate(0,0);
} 25% {
-moz-transform: translate(0,-10px);
-webkit-transform: translate(0,-10px);
-o-transform: translate(0,-10px);
-ms-transform: translate(0, -10px);
transform: translate(0,-10px);
}
50% {
-moz-transform: translate(0,-20px);
-webkit-transform: translate(0,-20px);
-o-transform: translate(0,-20px);
-ms-transform: translate(0, -20px);
transform: translate(0,-20px);
} 75% {
-moz-transform: translate(0,-10px);
-webkit-transform: translate(0,-10px);
-o-transform: translate(0,-10px);
-ms-transform: translate(0, -10px);
transform: translate(0,-10px);
} 100% {
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
-ms-transform: translate(0, 0);
transform: translate(0,0);
}
}

  

.qi:not(:target),.birds:not(:target),.hong:not(:target){
-webkit-animation-name: bird;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: bird;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-o-animation-name: bird;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-ms-animation-name: bird;
-ms-animation-duration: 5s;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
animation-name: bird;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

  

css3 图标上下移动动画的更多相关文章

  1. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  2. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  3. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  4. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  5. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  6. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  7. css3实现循环执行动画,且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  8. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  9. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

随机推荐

  1. 关于egit的日常操作总结

    $git fetch -p --prune -p -- remove any remote tracking branches that no longer exist remotely prune的 ...

  2. 纯CSS实现三列布局(两边固定,中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.== 看代码: html: <div class="top&qu ...

  3. dedecms 知识点总结

    生成-更新主页html 将自定义字段在arclist调用:   内容模型管理==>频道模型管理==>增加新字段==>列表处理:  使字段可以在列表的底层模板中获得(自定义字段默认仅能 ...

  4. Android开发之Service

    什么是Service? Android中的服务与Activity不同,他是不能与用户进行交互,自己也不能启动在后台运行的程序,当我们退出应用时,Service应用并没有结束,它仍然在后台运行. 例子: ...

  5. shell脚本实例(2)

    1.传给脚本一个参数:目录,输出该目录中文件最大的,文件名和文件大小 #!/bin/bash if [ $# -ne 1 -o ! -d $1 ];then echo "Args is er ...

  6. 如何给windows窗体程序打包成一个安装包

    http://blog.csdn.net/xyy410874116/article/details/6341787 给windows窗体程序打包成一个安装包:具体操作在:http://hi.baidu ...

  7. 重叠I/O之使用完成例程的扩展I/O【系列二】

    一 废话 在上一篇文章中,我们介绍了通过等待内核对象来接受I/O完成通知的重叠I/O.除了使用同步对象外,我们还可以使用其它方法,这便是这篇文章要介绍的使用完成例程的扩展I/O.完成例程其实就是回调函 ...

  8. 从V$SQL_PLAN中FORMAT执行计划

    10G版本 select sql_id from v$sqlarea where sql_text like'%xxx%'; select  * from v$sql_plan where sql_i ...

  9. ReactiveCocoa入门教程——第二部分(转)

    ReactiveCocoa是一个框架,它能让你在iOS应用中使用函数响应式编程(FRP)技术.在本系列教程的第一部分中,你学到了如何将标准的动作与事件处理逻辑替换为发送事件流的信号.你还学到了如何转换 ...

  10. 第36条:坚持使用Override注解

    @Override 注解只能用在方法声明中,表示被注解的方法声明覆盖了超类型中的一个声明. @Target(ElementType.METHOD) @Retention(RetentionPolicy ...