码迷,mamicode.com
首页 > 其他好文 > 详细

今日提及之动画animation

时间:2016-08-05 23:08:42      阅读:425      评论:0      收藏:0      [点我收藏+]

标签:

今天没有说什么内容,只是对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

标签:

原文地址:http://www.cnblogs.com/zhangzhicheng/p/5742908.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!