这里有一个小小的请求:
就是本人,最近在公司做网页,网页还在测试中,同时我希望有人浏览,带来一点流量,当你看这篇文章时候,帮个小忙,点一下这个网站;这是一个关于汽车后时代服务的网站;可以的话给点小建议;谢谢!
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