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 ...
随机推荐
- nginx查看日志
原文:nginx日志格式及自定义日志配置 nginx的log日志分为access log 和 error log 其中access log 记录了哪些用户,哪些页面以及用户浏览器.ip和其他的访问信息 ...
- update目标在查询返回结果集中的解决方案
示例: students为学生信息表 Score为成绩表 两个表通过学生号关联 要求:将总成绩小于100的学生名称改为‘天才’ sql如下: error提示:update目标不能在查询返回结果集中 ...
- Java 简单算法--打印回文数字
package cn.magicdu.algorithm; public class CircleNumber { public static void main(String[] args) { f ...
- VBA实现随意输入组合码,查询唯一标识码
记录背景: 需要在excel中查询出组合码,对应的唯一标识码. 举例 组合码:4+5+6+9+1*2 标识码:A1 界面随意输入组合码:1*2+4+5+6+9 输出标识码:A1 VBA实现: P ...
- Android系统简介(中):系统架构
Android的系统架构栈分为4层,从上往下分别是Applications.Application framework.Libraries & Android Runtime.Linux ...
- mysql net连接读取结果为乱码 Incorrect string value
在mysql直接查询中文正常,通过连接到mysql读取中文内容为乱码.同时插入中文内容也失败提示 Incorrect string value: '\xBC\xA4\xB7\xA2\xBF\xB4.. ...
- Mysql的权限管理
权限管理 创建用户 语法: create user '用户名'[@'主机名'][identified by '密码']; 示例: 说明: 用户名必须使用引号 '主机名'可以是以 ...
- Python Numpy
ebook on quant trading /量子交易 參考: Python在Windows下的安裝可以使用Python(x,y).
- 学习C++ Primer 的个人理解(十)
标准库没有给每个容器都定义成员函数来实现 查找,替换等操作.而是定义了一组泛型算法,他们可以用于不同类型的元素或多种容器类型. 迭代器令算法不依赖与容器 算法永远不会执行容器的操作 算法本身不会执行容 ...
- MFC下拉框使用方法
Combo Box (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项,同时也可以直接在文本框里面输入文本 ...