超炫的CSS3动画效果

时间：2014-04-11 发布人：SHX 浏览次数：3396 评论：0

在CSS3还没有普及的今天，我们可以先体验一下CSS3带给我们的强大的炫彩效果。这些以前可能需要用flash来制作或用JS来实现的动画，现在只要CSS3里面简单的样式就可以实现了。在测试这些效果的时候记得一定要浏览器支持HTML5哦。

这两个网站大概介绍了CSS3和展示了CSS3实例，可以去看看很炫的。

CSS3里面有一个animation定义一个myfirst(myfirst可以自定义，这个叫什么我也不知道嘿嘿，我也是刚学习中),

animation:myfirst 5s;

然后

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

定义他"from...to...",背景从红色到黄色，以5s的速度改变。

也可以这样定义

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

到1/4的时候从红色到黄色，2/4的时候从黄色到蓝色.....

很简单的代码就能实现FLASH功能，当然我也是刚开始研究中，如果大家有兴趣的去上面那两个网站看看。

发表评论

技术宅