今天没有说什么内容，只是对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. $event 获取对象

    用Angular给元素添加事件时获取可以用 $event 传递当前触发的事件的元素对象 页面上可以这样写 <img ng-src="" alt="" ng ...

  2. Android四种点击事件和五中存储方式

    Android点击事件的四种实现方式 1.内部类实现onClickListenter接口 bt_login.setOnClickListener(new MyListener()); class My ...

  3. 移动web资源整理

    [原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...

  4. HDU5977 Garden of Eden（树的点分治）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5977 Description When God made the first man, he ...

  5. java-并发-不可变对象

    浏览以下内容前,请点击并阅读 声明 当一个对象创建后的状态不可改变时就认为其为不可变对象,尽可能地利用不可变对象被公认为是构建简单可靠代码的有效方法.不可变对象在并发程序中比较有用,由于其状态无法改变 ...

  6. Struts 2

    <默认>execute -- 默认方法success -- 默认返回值 <配置><package><package name="default&qu ...

  7. src/main/Java路径下的properties文件丢失

    在pom中加入代码: <build> <resources> <resource> <directory>src/main/java</direc ...

  8. 基础2.通过Ajax获得servlet数据（最基础）

    案列一:从服务器的得到输出的数据 Jsp界面 <script type="text/javascript" src="test.js"></s ...

  9. photoshop

    photoshop裁剪 photoshop裁剪快捷键是C键: 使用photoshop裁剪工具裁切出图片的方法: 选择好所需要的图片,右键保存到本地计算机' 在photoshop中打开这张图片(文件/打 ...

  10. StartSSL免费SSL证书申请和账户注册完整过程

    StartSSL算是比较早提供免费SSL证书的第三方提供商,我们可以免费申请且免费续期使用到有需要HTTPS网址的用户.关于网站使用SSL证书主要还是因为谷歌在向导说明中提到如果一个网站使用到SSL证 ...