今天没有说什么内容，只是对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. 【HTTP】模拟form提交表单（转）

    第一种:WebClient string postString = "arg1=a&arg2=b";//这里即为传递的参数,可以用工具抓包分析,也可以自己分析,主要是for ...

  2. C#开发笔记

    Dictionary 检查后获取值:Dictionary.TryGetValue() KeyValuePair<T, K> 的非泛型形式:DictionaryEntry List 由ILi ...

  3. [8.2] Robot in a Grid

    Imagine a robot sitting on the upper left corner of grid with r rows and c columns. The robot can on ...

  4. UTC时间和本地时间的区别

    在用AS3的Date时,年月日都有两个api,带UTC和不带UTC的,比如fullYear,fullYearUTC 输出看一下: var date:Date = new Date; trace(dat ...

  5. mac 终端 常用命令

    基本命令1.列出文件ls 参数 目录名        例: 看看驱动目录下有什么:ls /System/Library/Extensions参数 -w 显示中文,-l 详细信息, -a 包括隐藏文件2 ...

  6. [LintCode] Container With Most Water 装最多水的容器

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  7. initWithCoder与initWithFrame的区别

    1. initWithFrame方法是什么?   initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方 ...

  8. cocos2d中各种action方法的应用

    Action示例: 1.移动动作 cc.MoveBy:create(time, posX, posY)  在time时间内,相对当前位置基础上移动x,y个单位. cc.MoveTo:create(ti ...

  9. ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 昨天重新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行 ...

  10. window下搭建c开发环境（GNU环境的安装）

    一.在windows平台上安装GNU环境 windows操作系统不自带GNU环境,如果需要开发跨平台的C语言程序,那么需要给windows安装GNU环境 windows下的两款GNU环境:MinGW和 ...