css3 图标上下移动动画
@-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 图标上下移动动画的更多相关文章
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 非常酷的CSS3垂直下拉动画菜单
昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...
- 创建CSS3警示框渐变动画
来源:GBin1.com 在线演示 在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- css3实现循环执行动画,且动画每次都有延迟
一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
随机推荐
- [转载]GDB十分钟教程
转自:http://blog.csdn.net/liigo/article/details/582231/ GDB十分钟教程 作者: liigo原文链接: http://blog.csdn.net/l ...
- 猪满满 购物APP
猪满满是专注“省钱,赚钱”的购物App,使用自定义tabar分为四大类,分别是首页,超返,发现,我的. 首页:使用UItableview,自定义cell展示商品. 超返:自定义Button分为综合,返 ...
- ASP连接MYSQL数据库
<% strconnection="driver={mysql odbc 3.51 driver};database=weste_net;server=localhost;uid=ro ...
- linux字符设备驱动学习笔记(一):简单的字符设备驱动
最近在鼓捣lnux字符设备驱动,在网上搜集的各种关于linux设备驱动的代码和注释,要么是针对2.4的,要么是错误百出,根本就不能运行成功,真希望大家在发博客的时候能认真核对下代码的正确性,特别是要把 ...
- [python] 高效使用assert
Places to consider putting assertions: checking parameter types, classes, or values checking data st ...
- html-----020----事件
html事件 <body> <a href="http://www.cctv.com" accesskey="k" target=" ...
- sql server 2008如何保存Emoji表情
1.将就的方法已找到,在保存前,Emoji表情字符串进行utf-8编码,然后写入数据表的nvarchar(max)字段,取出时再进行解码即可. c#的写法如下: 写入数据表前编码: string sH ...
- (转)传统MySQL+ Memcached架构遇到的问题
实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的不断增加,和访问量的持续增长,我们遇到了很多问题: ...
- Windows 键盘操作快捷方式积累
复制.粘贴: CTRL+C 复制被选择的项目到剪贴板 CTRL+V 粘贴剪贴板中的内容到当前位置 CTRL+X 剪切被选择的项目到剪贴板 Alt+ space + E + P CMD 窗口快速粘贴 关 ...
- 我爱工程化 之 gulp 使用(一)
一.简介 gulp是前端自动化工具,压缩.合并.预编译检查等等,它与grunt频繁IO操作来消耗内存相比,它是使用的流的方式,我们可以简称为管道流(一端入,一端出,3通水,一个大桶,第一通在管道里面流 ...