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 ...
随机推荐
- 今天学习image在html中的应用
今天学习image在html中的应用 上次在学习超级链接的使用中有一小问题,是在添加网址中href="http://www.baidu.com" 中不能忘记http://,否则链接 ...
- JavaScript入门(10)
一.Window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 window对象方法 二.JavaScript计时器 在JavaScript中,我们可以在设定的时间间隔之后来 ...
- h2database源码浅析:集群
Clustering / High Availability This database supports a simple clustering / high availability mechan ...
- 【算法】A*改进算法
目的:我这里希望实现一个java A* 游戏里的战斗寻径 定义部分: 这个定义引用自 http://www.cnblogs.com/kanego/archive/2011/08/30/2159070. ...
- react native for Android (make you first android app)
第一步:如果你的电脑安装了node,恭喜你,第一步完成:如果没有,那请先安装node. 第二步:安装react-native-cli,在windows下需要从github签下来的react-nativ ...
- Sublime Text2上搭建C/C++环境
环境:Sublime Text2 win7 64位 1.下载Sublime Text2并安装 下载地址:http://www.sublimetext.com/ 2.需要用 ...
- SimpleDateFormat 的性能和线程安全性
系统正常运行一段时间后,QA报给我一个异常: java.lang.OutOfMemoryError: GC overhead limit exceeded at java.text.DecimalFo ...
- shell小程序
因此需要挑选学生,因此需要一个抓阄的程序:要求:1.执行脚本后,想去的同学输入英文名字全拼,产生随机数01-99之间的数字,数字越大就去参加项目实践,前面已经抓到的数字,下次不能在出现相同数字.2.第 ...
- ios Swift 资源池
Swift入门教程: http://www.cocoachina.com/applenews/devnews/2014/0604/8661.html Swift视频教程: http://www.coc ...
- cocos2d-x实战 C++卷 学习笔记--第4章 使用菜单
前言: 菜单中包含菜单项,菜单项类是 MenuItem ,每个菜单项都有三个基本状态:正常.选中和禁止. (MenuItem)菜单分类: (文本菜单)MenuItemLabel : MenuItemA ...