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 ...
随机推荐
- 命令行界面下的用户和组管理之useradd和passwd命令的使用
命令行界面下的用户和组的管理之useradd和passwd命令的使用 useradd [-c comment] [-d dir] [-e expire] [-g group] [-G group1,g ...
- 解决myeclipse过期问题
一般myeclise使用期限为30天,超过之后,会频繁的提醒你,购买软件,很讨厌,有个这个小工具,,以后再也不怕啦!!! 使用方法: 1:将这个类导入到myeclipse包中 2:运行main方法,提 ...
- html元素拖拽
html <div> <div class="money-input"> 定投金额 : <div class="input-rela&quo ...
- SpringMVC注册拦截器
方法1: 拦截所有URL <mvc:interceptors> <bean class="cn.ciss.interceptor.LoginInterceptor" ...
- Android 6.0doze和standby 的一点理解
之前写的压力测试程序,在开发版和5.0上面测试好好的,即使熄灭屏幕也会跑.我的程序主要是在Activity里面开启了一个thread,其中不断在界面上显示任务信息.换到6.0的 机器上面,发现一个现象 ...
- Android之Http网络编程(二)
上一篇文章简单的介绍了Android中http的两种通信方式,并且分别用获取百度网页做了实例.但是在实际应用中,更多的是客户端通过请求的参数来实现在服务端的具体操作,并最终返回数据给客户端.因为我们不 ...
- MongoDB的主从复制和副本集
mongoDB的两个特性主从复制和副本集,实现了数据的同步备份 一.主从复制 主从复制是一个简单的数据库同步备份的集群技术.例如主服务器宕机了,可以直接使用从服务器,主服务器恢复后在进行同步,保证了业 ...
- OC5_构造方法与self指针
// // Dog.h // OC5_构造方法与self指针 // // Created by zhangxueming on 15/6/9. // Copyright (c) 2015年 zhang ...
- 13_CXF和Spring整合发布服务
[服务端] 第一步:建立一个Web项目 第二步:填充CXF jar包 第三步:创建接口及服务类 [工程截图(对比之前的WebService_CXF_Server00)] [applicationCon ...
- 洛谷 P1108 低价购买
P1108 低价购买 标签 动态规划 难度 提高+/省选- 题目描述 "低价购买"这条建议是在奶牛股票市场取得成功的一半规则.要想被认为是伟大的投资者,你必须遵循以下的问题建议:& ...