左右滑动

今天的我们将学习有关图案左右滑动的方法，以及小案例的制作。
在案例的制作过程中最不可缺的技术就是css3的动画效果，下面我们来认识一下css3中有哪些动画效果吧！首先是css3@keyframes 规则，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。(搭配animation使用。IE9，以及更早的版本不支持@keyframe 规则或 animation 属性)；其次是css3过渡效果，过渡是从一种样式逐渐变成另一中的效果。(IE9，以及更早的版本不支持@keyframe 规则或 animation 属性。有些版本的浏览器需要-webkit，才能实现效果)。
这次的案例制作中主要用的是css3过渡效果。在这里我们先看它的一些属性：

接下来就是案例的html布局了。html的部分很简单只需要一个div标签加上类名称就可以了，主要是css的部分更为重要。

写好后就开始我们css部分的布局了。
我们先给这个div标签设置宽高分别为500px，400px；边框大小设置为5px；外边距设置为上下60px，左右居中auto；字体大小设置为60px；文本阴影text-shadow（能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色），box-shadow属性向框添加一个或多个阴影。最终重要的是我们要给它添加一张图片上去。完整代码如下：

这是还没有加动画效果的样子：

属于一个静态的效果，接下来我们就要制作鼠标移上去会产生变化效果的部分了。首先在div后面加上hover属性，然后我们将它的外边距上下左右设置为居中auto；既然是鼠标移上去才能够显示的效果，那么我们就要与之前的图案产生对比才可以。这里它的字体颜色我们可以设置成其他的颜色，只要与之前不一样就行。完整代码如下：

设置好后，鼠标移上去的时候我们就可以看到下面这个图案。

之后我们为了让他的效果更加的明显，就会在设置div样式的时候加上它的一个过渡transition，时间设置为2s;
最后，我们来分析一下transition的其他属性效果。
transition-property属性：把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果。
transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

transition-duration属性: transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-timing-function：transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

transition-delay 属性：transition-delay 属性规定过渡效果何时开始。

到你看到这里就说明这个案例已经结束了。通过这案例我们学到如何使用css3中的动画效果，以及对过度属性transition的了解和使用。