今天没有说什么内容，只是对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. LeetCode 412. Fizz Buzz

    Problem: Write a program that outputs the string representation of numbers from 1 to n. But for mult ...

  2. twitter.common.concurrent deadline and defer

    此defer非golang中的defer https://tour.golang.org/flowcontrol/12 from twitter.common.concurrent import Ti ...

  3. HTML5之文件API

    问题很简单,做个上传文件的页面. <!-- multiple代表可上传多个文件 --> <input type="file" id="file" ...

  4. XVI Open Cup named after E.V. Pankratiev. GP of Peterhof

    A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...

  5. 51nod算法马拉松15

    智力彻底没有了...看来再也拿不到奖金了QAQ... A B君的游戏 因为数据是9B1L,所以我们可以hash试一下数据... #include<cstdio> #include<c ...

  6. 基于java平台的常用资源整理

    这里整理了基于java平台的常用资源 翻译 from :akullpp | awesome-java 大家一起学习,共同进步. 如果大家觉得有用,就mark一下,赞一下,或评论一下,让更多的人知道.t ...

  7. 学用了QT觉得QT较怪异

    如果让我选择不会用qt 还是用界面开源库,boost.

  8. SQL 提高查询效率

    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享: 机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试, ...

  9. ubuntu 16.04 Dockerfile 安装mysql

    默认上MariaDB的包并没有在Ubuntu仓库中.要安装MariaDB,我们首先要设置MariaDB仓库. 配置MariaDB 仓库 # apt-get install software-prope ...

  10. WIN32 窗口类封装 框架实现部分

    上面已经讲了窗口封装部分,内容可点击:http://www.cnblogs.com/mengdejun/p/4010320.html,下面分享框架部分内容,完成WINDOWS消息迭代 CQFrameW ...