今天看到一个很酷的logo看了下他用的是animation 动画效果，就拿来做例子

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="mymove 5s infinite"

语法

  1. animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

下面是w3school的实例，

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:100px;
  9. background:red;
  10. position:relative;
  11. animation:mymove 5s infinite;
  12. -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
  13. }
  14.  
  15. @keyframes mymove
  16. {
  17. from {left:0px;}
  18. to {left:200px;}
  19. }
  20.  
  21. @-webkit-keyframes mymove /*Safari and Chrome*/
  22. {
  23. from {left:0px;}
  24. to {left:200px;}
  25. }
  26. </style>
  27. </head>
  28. <body>
  29.  
  30. <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
  31.  
  32. <div></div>
  33.  
  34. </body>
  35. </html>

这是站点logo使用的动画效果

<div id="logo"></div>

#logo {
    animation: 1s steps(16) 0s reverse none infinite running logo;
    background: transparent url("seclogo.png") no-repeat scroll 0 0;
　 width: 195px;
    height: 150px;
}
 
@-webkit-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}
@-moz-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}
@-o-keyframes logo {
    from { background-position: 0px; }
    to { background-position: -3120px; }
}

好简单就出了一个跳动的动作，很强大啊， 调整steps（16）中的数字还能实现左右滑动效果 ，1s自然就是跳动的频率了，不过加快动作好像不行，慢动作却是可以。
附上seclogo.png图 大家可以测试看看，这是他们原网站的www.66pc28.com的logo,虽然这logo看上去有些不协调的字体，但效果还是可以得，借鉴中。
 
 

CSS3 animation 动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  5. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  6. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  7. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  8. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. 【iOS10 SpeechRecognition】语音识别 现说现译的最佳实践

    首先想强调一下“语音识别”四个字字面意义上的需求:用户说话然后马上把用户说的话转成文字显示!,这才是开发者真正需要的功能. 做需求之前其实是先谷歌百度一下看有没有造好的轮子直接用,结果真的很呵呵,都是 ...

  2. 不要着急改代码，先想想--centos 6.8下编译安装tmux

    诸位读者新年好,2017开年第一篇博客,请允许我先问候一下看到这篇博客的诸位.写博客是我2017年定下的目标之一,希望我会坚持下去. 最近打算尝试一下tmux这个神器,于是有了这一篇关于思维方式的Bl ...

  3. XSS 前端防火墙 —— 天衣无缝的防护

    上一篇讲解了钩子程序的攻防实战,并实现了一套对框架页的监控方案,将防护作用到所有子页面. 到目前为止,我们防护的深度已经差不多,但广度还有所欠缺. 例如,我们的属性钩子只考虑了 setAttribut ...

  4. 用Taurus.MVC 做个企业站（上）

    前言: 之前是打算写一篇文章叫:Taurus.MVC 从入门到精通,一篇完事篇! 后来转指一念,还是把教程集在这个企业站项目上吧!!! 企业站风格: 之前发过一个帮师妹写的企业站:最近花了几个夜晚帮师 ...

  5. XCodeGhost表明：为了安全，开发工具应该从官方网站下载

    今天的热门话题就是XCode编译器,这个神器在火热的移动互联网浪潮下也被人利用了,据文章分析 (XCode编译器里有鬼 - XCodeGhost样本分析)http://www.huochai.mobi ...

  6. CI Weekly #9 | 揭秘阿里 Docker 化实践之路

    2017年悄然而至,对 flow.ci 你有什么新的期待呢?新的一年,flow.ci会越来越强大好用,希望继续得到你的支持与反馈.最近,我们做了如下的「功能优化」与「问题修复」,看看有没有你想要的: ...

  7. node入门学习1

    一个普通网站访问过程(1)浏览器向服务器发出一个HTTP请求(2)域名解析为IP地址(3)建立TCP连接(4)浏览器发起HTTP请求(5)服务器接收到HTTP请求,解析请求的路径和参数 出现乱码的原因 ...

  8. 【项目记录】-液化气配送app android版

    15年底参与过甲方呼叫中心平台开发.液化气配送app android版要求1个月开发完成.开发此项目以前我只有过一周android的开发经验.(与甲方签署过保密协议,遵循职业道德有些敏感信息不能写.) ...

  9. 1、.NET平台概述

        本学习主要参考Andrew Troelsen的C#与.NET4高级程序设计,这小节主要述说以下几个东西:     宏观上讨论一下.net相关的主题:程序集.CIL(Common Interme ...

  10. 史上最全、JavaScript基础篇

    本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.fo ...