今天没有说什么内容，只是对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. dedecms为文档页增加动态点击

    加上 <script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id' ...

  2. BZOJ2498 : Xavier is Learning to Count

    考虑容斥,通过$Bell(p)$的时间枚举所有等价情况. 对于一种情况,强制了一个等价类里面的数都要相同,其它的可以相同也可以不同. 这方案数显然可以通过多项式乘法求得,乘上容斥系数$(-1)^{p- ...

  3. [MySQL+PHP] 触发器及存储过程等MySQL功能在PHP中实现的坑

    折腾了一下午,始终没有能搞定在PHP中编写事件. 因为业务需求,需要实现一个预操作的功能,即业务人员填写未来的某个要做某个操作.在这个日期到来之前,则一切照常. 想通过PHP编写MySQL Event ...

  4. HTC辟谣: HTC Vive2不会在CES 2017上公布

    HTC官方:第二代Vive不会在CES 2017上发布.曾有消息称HTC Vive的下一代--Vive 2将在CES 2017上展出能成为首个4K头显以及无线头显.但日前HTC官方给于否认,此消息不实 ...

  5. js排序算法总结——冒泡，快速，选择，插入，希尔，归并

    相信排序是任何一个程序猿都会用到的东西,今天简单总结记录下常见的排序算法. 一.冒泡排序 说起冒泡排序,可能每个人都不会陌生,实现思路相当简单明了,就是不停的对数组进行两两比较,将较大(较小)的一项放 ...

  6. spring3.0使用annotation完全代替XML(三)

    很久之前写过两篇博客: spring3.0使用annotation完全代替XML spring3.0使用annotation完全代替XML(续) 用java config来代替XML,当时还遗留下一些 ...

  7. XCode设置自己windows习惯的快捷键(比如Home、End键)

    Xcode的preference(command+,)中可以设置Key Bindings.绑定自己习惯的快捷键.实测系统快捷键设置同样名字也可以生效,但操作比较繁琐这里就不介绍了. 1.打开Xcode ...

  8. 使用Python中PIL图形库进行截屏

    目的:通过使用Python的一个图形库PIL(Python Image Library)对屏幕进行截图 步骤: 1.下载PIL(路径)并安装 2.新建文件“截屏.py”,右键Edit with IDL ...

  9. C代码实现非循环单链表

    C代码实现非循环单链表, 直接上代码. # include <stdio.h> # include <stdlib.h> # include <malloc.h> ...

  10. 分析错误：socket accept failed too many open files

    步骤:1.--查看当前各个进程打开的文件句柄数,其结果的第一列表示句柄数,第二列表示进程号lsof -n|awk '{print $2}'|sort|uniq -c |sort -nr|more 2. ...