使用css编写动画效果

使用css编写动画效果

第一步

• 新建一个静态页面，使用盒子模型，分别为其命名一个class类，设置他的宽高
• 在css中引入图片（雪碧图），需要用到css中的图片属性

p{background: url() no-repeat 1px  0;}

需要注意，把图片引进来作为背景图片时，会产生平铺的效果，因此配合background-repeat: no-repeat，防止平铺，需要定位，定位到想要的起始位置，下面是这几个属性的说明

图片的5大属性

-  background-color/background:red   背景颜色
-  background-image:url()  背景图片
-  background-repeat: no-repeat，这个属性是防止图片平铺，当然有时候需要设置是x轴平铺或者y轴平铺，用到的是repeat-x repeat-y
-  background-position: 2px 4px;代表的是x轴与y轴的起始坐标，需要注意的是不要忘记加单位px，x轴方向向右是负的，y轴的下方向是负的;
-  background-size:cover;这个属性是使背景图片覆盖整个页面，一般我们引入背景图片以后会随着放大缩小不平铺，但是加这个属性以后，平涂始终是平铺整个页面的；

这几个有一个缩写的属性，就是background：颜色 路径 平铺 位置，没有先后顺序

第二步

• 图片引入进来并且固定好以后，需要为他添加动画效果

动画的第一步

• 关键帧

@keyframes 动画的名称{
    //关键帧
    0%{background-position：0 0}
    100%{background-position：-1600px 0}
}

• 引入动画帧:在对应的盒子中，引入刚才的动画
  • animation：动画的名称 动画的时间 动画的运动轨迹 动画的运动次数。下面的引入是，引入动画名称为west04 的动画，时间是1s ，运动轨迹使用的是一个函数，因为我的雪碧图中是8个动作，因此为8 ，运动次数是无限次

.west04{
    width: 210px;height: 200px;
    background:  url(../images/west_04_6516d80.png) no-repeat;
    animation: west04 1s steps(8) infinite;
}