CSS3动画——雪碧图的实现

前言

作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管。因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片的知识点做一些小小的总结吧,也算是一种回顾吧,这样自己也不会忘记。

先说CSS3的动画

CSS3关于动画的属性其实也不过就是这么几个,transform、transition、animation,这里简单的说一下每一个的使用方法,就不细说了,网上已经有无数多的例子讲这几个属性。
变换属性
transform:none | transform-function
transform-function 有很多:2D的,3D的

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

过渡属性
过渡属性很重要,你定义了一个变换,还需要定义过渡时间,才会看到效果
transition:single-transition

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

//简写写法
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

动画属性
animation:single-animation
实际上就是自己定义的变换,以百分比来定义的一种变换。

//这里定义一个动画名叫myfirst的动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

//将动画myfirst添加到div中,并设置动画时间为5s
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

雪碧图的实现

所谓雪碧图就是一张图,包含了很多小图,可以通过这些小图实现一个动作,如下是一张雪碧图:

这里写图片描述

那么我们可以通过CSS的animation来设置背景图片的位置,呈现出一种动态效果


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        .girl{
            background: url('img.png');
            width: 160px;    //务必设置box的宽度,这样其他不在box中就不会显示
            height: 185px;
            background-size: 1120px 212px;
            -webkit-animation: demo 2s steps(7) infinite; //steps(7)表示设置7步完成动画
        }
        @-webkit-keyframes demo{
            0%{ background-position: 0 0 }
            100%{ background-position: -1120px 0} //设置背景图的位置从0 到-1120px
        }
    style>
head>
<body>
<div class="box">
    <div class="girl">div>
div>
body>
html>

大家可以自行保存上面图片,并复制上面代码进行测试,是不是很简单。


有兴趣的可以pull我的代码
https://github.com/daisyHawen/css3-sprite-display.git
展示了两个小小的sprite案例

你可能感兴趣的:(css)