前端日记 三 css3 动画(笔记)

这里有一个小小的请求：

就是本人，最近在公司做网页，网页还在测试中，同时我希望有人浏览，带来一点流量，当你看这篇文章时候，帮个小忙，点一下这个网站；这是一个关于汽车后时代服务的网站；可以的话给点小建议；谢谢！

http://ichezone.com

这篇文章主要讲如何使用css3动画效果让自己做的网站更加漂亮生动；

比如 人人小站，点点博客 这些网站在制作上就使用了css3动画的许多效果；

废话不多说，立即献上代码（代码有限，日后积累后会一点点补上，莫见怪）：

首先献上一张图，这是在 ”人人小站“, 这个网站上下载的一直图片，它呢是做滚动的效果，当鼠标移动到箭头上，他会发生滚动的效果；

代码如下：

首先是: 设置 背景图+颜色

a.next-btn{ background:url(btt-new.png) no-repeat scroll 7px -251px #3399FF;}

然后，就是设置 动画效果:

a.next-btn{display:block;height:25px;width:50px;text-indent:-9999em;transition-duration: 0.5s;    transition-timing-function: cubic-bezier;}a.next-btn:hover{background-position: 7px -311px;}

我们通过修改background position的方式来是实现动画，时间是0.5秒，相关效果可以参考下列参数；

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。cubic-bezier：特殊的立方贝塞尔曲线效果。

笔记二；

当你想实现背景色的过渡效果时候，你可以使用以下代码；

transition-duration: 0.3s;    transition-property: color;    transition-timing-function: ease;

具体方法请常考 上一个例子

我菜鸟啦，技术还不是很完美，希望有相同爱好的，或者是工作需求的同学们，有机会一起交流一下，我在深圳 南山，可以交流；

QQ 交流也行：1831762942