CSS3动画——雪碧图的实现

来源：互联网发布：电脑软件消失编辑：程序博客网时间：2024/05/21 17:07

前言

作为一个前端的初学者，现在好像已经在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中，并设置动画时间为5sdiv{animation: myfirst 5s;-webkit-animation: myfirst 5s; /* Safari and Chrome */}

雪碧图的实现

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

这里写图片描述

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

<!DOCTYPE html><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案例

0 0