@keyframes ico{
0% {
top: -100%;
} 100%{
top:4%;
}
} @-webkit-keyframes ico{
0% {
top: -100%;
} 100%{
top:4%;
}
}

  

.logoico:not(:target){
-webkit-animation-name: ico;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
animation-name: ico;
animation-duration:1s;
animation-iteration-count: 1; }

  

css3创建动画的更多相关文章

  1. Magic CSS3 – 创建各种神奇的交互动画效果

    Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...

  2. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  3. CSS SANS – 神奇!使用 CSS3 创建的字体

    在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...

  4. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  5. CSS笔记(十四)CSS3之动画

    参考:http://www.w3school.com.cn/css3/css3_animation.asp 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 Ja ...

  6. css3 实现动画

    CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...

  7. CSS3 的动画属性

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. ㈠@keyframes 规则 ⑴浏览器支持 Firefox 支持替代的 @-moz-ke ...

  8. css3支持动画吗?css3可以用于网页动画的展现吗

    CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面. css3动画有2类:一种是transition的,另一种 ...

  9. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

随机推荐

  1. CSS Selector (part 1)

    Selector概述 示例: strong { color: red; } 解释: 这是一个完整 css 规则(标签选择器).strong 叫做选择器,它选择该规则将被应用到 DOM 的那个元素上去. ...

  2. 关于Struts2中的值栈与OGNL表达式

    1.1.1    OGNL概述: Object Graphic Navigation Language(对象图导航语言)的缩写 * EL     :OGNL比EL功能强大很多倍. 它是一个开源项目. ...

  3. Matlab中plot、fplot、ezplot的使用方法和区别

    函数plot 是绘制二维图形的最基本函数,它是针对向量或矩阵的列来绘制曲线的.也就是说,使用plot 函数之前,必须首先定义好曲线上每一点的x 及y 坐标; 常用格式为: (1)plot(x) 当x ...

  4. highcharts 24小时显示数据,显示00:00格式的数据

    Showing 24 hours on xAxis WITHOUT a date on 00:00 格式参考PHP手册中的: strftime

  5. beanfactory与applicationcontext的区别

    ApplicationContext能够自动辨认和应用在其上部署的实现了BeanFactoryPostProcessor的bean 特性                            Bean ...

  6. Java 简单算法--打印回文数字

    package cn.magicdu.algorithm; public class CircleNumber { public static void main(String[] args) { f ...

  7. System.Data.SqlClient.SqlError: 对文件……的目录查找失败[转]

    System.Data.SqlClient.SqlError: 对文件……的目录查找失败,出现操作系统错误 3 的处理办法 在还原SQL SERVER数据库时出现了查找目录失败的原因,困扰了我一个多小 ...

  8. JavaScript DOM编程艺术 - 读书笔记1-3章

    1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...

  9. 第3条:用私有构造器或者枚举类型强化Singleton属性

    Singleton是指仅仅被实例化一次的类.通过被用来代表那些本质上唯一的系统组件,比如窗口管理器或者文件系统. 在http://www.cnblogs.com/13jhzeng/p/5256424. ...

  10. ubuntu12.04 U盘自动挂载配置

    Ubuntu12.04禁止U盘等设备的自动挂载方法如下: 在图形界面(字符界面无效)内进入系统终端,ctrl+alt+T或者gnome-terminal 禁止自动挂载:$ gsettings seto ...