@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. Visual Studio 2015中的常用调试技巧分享

    .NET 技术交流群:337901356 欢迎您的加入! 为什么要学习调试? 调试(Debug)是作为一个程序员必须要学会的东西,学会调试可以极大的提高开发效率,排错时间,很多人不喜欢调试,但我认为这 ...

  2. php xml常用函数的集合(比较详细)

    1.DOM 函数 a.DOMDocument-<load()作用:加载xml文件用法:DOMDocument-<load( string filename )参数:filename,xml ...

  3. jquery animate 制作简单弹幕

    定位滚动条 $("html,body").animate({scrollTop:$(".middle1").offset().top},1000) 弹幕 < ...

  4. foo,bar,baz

    https://en.wikipedia.org/wiki/Foobar 原文: The terms foobar, foo, bar, baz and qux are sometimes used ...

  5. 用Java socket (TCP通信模型)实现一个简单的web 服务器

    package cn.magicdu.think.socket; import java.io.OutputStream; import java.io.PrintWriter; import jav ...

  6. SQL Server 负载均衡集群方案之Moebius

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 架构原理(Architecture) 测试环境(Environment) 安装Moebius( ...

  7. WIN8+VS2013编写发布WCF之一(编写)

      引言:上学期因为写服务器用WCF,所以连查资料再瞎调试勉强成功了,但是这学期又到了用WCF的时候,而当时的资料零零散散,查找不易,并且此次是在WIN8与VS2013环境下编写的,所以将该入门过程记 ...

  8. OpenJudge/Poj 2000 Gold Coins

    1.链接地址: http://bailian.openjudge.cn/practice/2000 http://poj.org/problem?id=2000 2.题目: 总Time Limit: ...

  9. mysql常见的hint(转载的)

    mysql常用的hint对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的hint功能.下面介绍一些常用的. ...

  10. Raphael:JS矢量图形库

    Raphael:JS矢量图形库 2016-08-29 http://dmitrybaranovskiy.github.io/raphael/