今天没有说什么内容，只是对HTML5的细节补充，如HTML结构的可以省略到最大的地步

<!DOCTYPE html>
<meta charset="UTF-8">

<title>animation</title>

这里是放内容的

没有了基本的结构标签了，浏览器会自动帮我们生成。

还有标签的属性的双引号也可以省略；

<input type=text>

HTML5让我体验到它在最大化的简化标签，使代码量最小化。

还有调试工具的使用，调试工具让我们更快的更准确的查到各方面的信息，

大大提高了写代码的效率，如console控制台的使用，可以快速的查找到错误在哪。

还有模拟各种设配的屏幕大小，响应式的测试，让响应式代码编写提供方便。

还有一个网络network查看，可以让看到各种请求的信息，和为优化页面方面的信息，如

文件的大小。

今日内容到此，接下来是今天看到的一个响应式网站的动画，而下面是它的实现。

今天看到一个logo到弹出按钮的过渡动画，而它的实现是完全HTML5+css3的代码。

所用到主要的知识是css3的animation属性，还有一个div css sprites精灵，简单叫法：图片精灵；

什么是图片精灵？

其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，

特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

然后开始实现：

首先要去目标网站拔图片。

下面是图片：

然后是使用ps测总长度，测每个的间距，这个可以使用到切片工具，在你对图片切割好时双击图片会有个图片的信息，如图片所在的位置x,y，图片的宽高w、h。

这样就可以快点测出图片的位置了，然后使用当前一张位置x减前一张个图片位置x，就可以测出间距了。

先放效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>animation</title>

    <style>

    #container{

        width: 200px;

        height: 130px;

        margin: 0 auto;

        background: url(图片地址) no-repeat -58px -5px;

    }

    #container:hover{

        -webkit-animation:doMove 3s;

        animation: doMove 3s;

    }

    @keyframes doMove{

        0%{background-position: -58px -5px;}

        3%{background-position: -368px -5px;}

        6%{background-position: -678px -5px;}

        8%{background-position: -988px -5px;}

        10%{background-position: -1298px -5px;}

        12%{background-position: -1608px -5px;}

        13%{background-position: -1918px -5px;}

        14%{background-position: -2228px -5px;}

        15%{background-position: -2538px -5px;}

        16%{background-position: -2848px -5px;}

        17%{background-position: -3158px -5px;}

        18%{background-position: -3468px -5px;}

        19%{background-position: -3778px -5px;}

        20%{background-position: -4088px -5px;}

        21%{background-position: -4398px -5px;}

        22%{background-position: -4708px -5px;}

        23%{background-position: -5018px -5px;}

        24%{background-position: -5328px -5px;}

        25%{background-position: -5638px -5px;}

        26%{background-position: -5948px -5px;}

        27%{background-position: -6258px -5px;}

        28%{background-position: -6568px -5px;}

        29%{background-position: -6878px -5px;}

        30%{background-position: -7188px -5px;}

        31%{background-position: -7498px -5px;}

        32%{background-position: -7808px -5px;}

        34%{background-position: -8118px -5px;}

        36%{background-position: -8428px -5px;}

        38%{background-position: -8738px -5px;}

        41%{background-position: -9048px -5px;}

        45%{background-position: -9358px -5px;}

        48%{background-position: -9668px -5px;}

        60%{background-position: -9668px -5px;}

        100%{background-position:-9668px -5px; }

    }

@-webkit-keyframes doMove{

        0%{background-position: -58px -5px;}

        3%{background-position: -368px -5px;}

        6%{background-position: -678px -5px;}

        8%{background-position: -988px -5px;}

        10%{background-position: -1298px -5px;}

        12%{background-position: -1608px -5px;}

        13%{background-position: -1918px -5px;}

        14%{background-position: -2228px -5px;}

        15%{background-position: -2538px -5px;}

        16%{background-position: -2848px -5px;}

        17%{background-position: -3158px -5px;}

        18%{background-position: -3468px -5px;}

        19%{background-position: -3778px -5px;}

        20%{background-position: -4088px -5px;}

        21%{background-position: -4398px -5px;}

        22%{background-position: -4708px -5px;}

        23%{background-position: -5018px -5px;}

        24%{background-position: -5328px -5px;}

        25%{background-position: -5638px -5px;}

        26%{background-position: -5948px -5px;}

        27%{background-position: -6258px -5px;}

        28%{background-position: -6568px -5px;}

        29%{background-position: -6878px -5px;}

        30%{background-position: -7188px -5px;}

        31%{background-position: -7498px -5px;}

        32%{background-position: -7808px -5px;}

        34%{background-position: -8118px -5px;}

        36%{background-position: -8428px -5px;}

        38%{background-position: -8738px -5px;}

        41%{background-position: -9048px -5px;}

        45%{background-position: -9358px -5px;}

        48%{background-position: -9668px -5px;}

        60%{background-position: -9668px -5px;}

        100%{background-position:-9668px -5px; }

    }

    </style>

</head>

<body>

    <div id="container"></div>

</body>

</html>

这里只做了Chrome 和 Safari 的兼容；

Chrome 和 Safari 的前缀 -webkit-。

如需要兼容其他自己兼容。

今日提及之动画animation的更多相关文章

  1. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  2. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  3. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  4. Qt-4.6动画Animation快速入门三字决

    Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...

  5. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  6. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  7. View 动画 Animation 运行原理解析

    这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...

  8. CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  9. 《The Cg Tutorial》阅读笔记——动画 Animation

    这段时间阅读了英文版的NVidia官方的<The Cg Tutorial>,借此来学习基本的图形学知识和着色器编程. 在此做一个阅读笔记. 本文为大便一箩筐的原创内容,转载请注明出处,谢谢 ...

随机推荐

  1. ViewPager+Fragment取消预加载（延迟加载）（转）

    原文:http://www.2cto.com/kf/201501/368954.html 在项目中,都或多或少地使用的Tab布局,所以大都会用到ViewPager+Fragment,但是Fragmen ...

  2. centos yum换阿里云源

    阿里云Linux安装软件镜像源 阿里云是最近新出的一个镜像源.得益与阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源. 阿里云Linux安装镜像源地址:http://mirrors.aliyun ...

  3. 用PS如何把图片调出时尚杂志色

    摘自:http://www.3lian.com/edu/2013/07-22/83061.html 01:打开图片,执行调整图层-色彩平衡;调整图层的标记-红色方框内图标. 02:色彩平衡-设置-点选 ...

  4. 实验二 c语言文法

    <程序>-><声明>|<程序><函数> <函数>-><修饰符><标识符><形式参数>< ...

  5. 创建WP8试用应用

    参考资料: 创建 Windows Phone 的试用应用 如何在 Windows Phone 应用中实现试用体验 Windows Phone 7 开发 31 日谈——第23日:提供试用版应用程序 对资 ...

  6. WEB应用的组成结构

  7. python lxml install

    之前记得安装libxslt和libxml yum install libxml* -yyum install libxslt* -y wget http://lxml.de/files/lxml-3. ...

  8. 通读SDWebImage③--gif和webP的支持、不同格式图片的处理、方向处理

    本文目录 NSData+ImageContentType: 根据NSData获取MIME UIImage+GIF UIImage+WebP UIImage+MultiFormat:根据NSData相应 ...

  9. iOS 让按钮上的标题换行显示

    项目中遇到了要让按钮上的文字换行显示的需求,就写了这个博客. 1.如果按钮上的文字固定,形式是写死的,可以考虑给标题文字加\n换行符来达到效果,但是,记得一定要设置这个属性,不然是不会换行的, but ...

  10. (转)C# XMPP客户端与openfire通信（Matrix Xmpp 授权破解教程）

    FROM:http://www.cnblogs.com/crabo/p/CRACK_MATRIX_XMPP.html 如此著名的XMPP , 居然试过jabber-net, agsXmpp,matri ...