@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. #284 div.2 C.Crazy Town

    C. Crazy Town   Crazy Town is a plane on which there are n infinite line roads. Each road is defined ...

  2. WinForm控件小知识

    1.DataGridView控件显示自定义表 //造个数据表 DataTable dt = new DataTable(); dt.Columns.Add("DEcode", Sy ...

  3. Ubuntu 14.04 & ant: Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-7-openjdk-i386/lib/tools.jar

    当我在vagrant + ubuntu 14.04,jenkins ant执行项目的build.xml时,提示: [workspace] $ ant -file build.xml Unable to ...

  4. jquery animate() 防止多次执行

    参考:关于jquery 怎样让 animate不多次执行呢 当click方法里面,执行animate时,然后点击的比较频繁,那么animate()的动画也会比较多次滚动. 如: function sc ...

  5. android之手动安装apk到模拟器

    一.将apk放到SDK的指定路径 二.打开命令行 三.安装apk到模拟器 此处遇到无法找到主机,解决办法: 发现是进程2512堵塞导致的 进入powershell 查看进程 发现2512进程是360手 ...

  6. 聊一聊 AngularJS 服务

    什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $loca ...

  7. 项目开发笔记-传单下发 名片替换 文件复制上传/html静态内容替换/json解析/html解析

    //////////////////////////// 注意: 此博客是个人工作笔记 非独立demo////////////////////////////////// .............. ...

  8. apache http server 多线程模式

    一般apache采用prefork和worker机制,通过apachectl -l命令查看默认使用的prefork机制.需要修改prefork策略 那么需要做如下修改: 1,/usr/local/ap ...

  9. plsql导入导出表

    原来总是直接 tools->import talbes->Oracle Import结果发现有的时候会出错:有的表不能正确导入, baidu+googel解决办法如下: 导出步骤: 1 t ...

  10. iOS 键盘回收实现步骤

    第一步:遵守协议 (UITextFieldDelegate) @interface AppDelegate : UIResponder <UIApplicationDelegate,UIText ...