之前在一个国外网站看到网站logo是动态的,当时由于有其他事情做就没细想,现在回头想想应该是CSS3,不然就是用javascript去实现。CSS3提供了一个动画的属性,能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。


CSS3 @keyframes 规则
如需在 CSS3 中创建动画,需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。


QQ截图20140825104850.png


以下是CSS代码,做了两个动画:


        .center {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .block {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            background-color: #0092dd;
            display: inline-block;
            position: relative;
        }
        .clear {
            display: block;
            height: 5px;
        }
        .animate_div {
            vertical-align: middle;
            text-align: center;
        }
        #animate1 {
            animation:animate_div1 5s infinite;
            -moz-animation:animate_div1 5s infinite; /* Firefox */
            -webkit-animation:animate_div1 5s infinite; /* Safari and Chrome */
            -o-animation:animate_div1 5s infinite; /* Opera */
        }
        #animate2 {
            animation:animate_div2 5s infinite;
            -moz-animation:animate_div2 5s infinite; /* Firefox */
            -webkit-animation:animate_div2 5s infinite; /* Safari and Chrome */
            -o-animation:animate_div2 5s infinite; /* Opera */
        }
        @keyframes animate_div1
        {
            0%      {transform: rotate(0deg);left:0px;}
            50%     {transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {transform: rotate(-360deg);left:0px;}
        }
        /* Firefox */
        @-webkit-keyframes animate_div1
        {
            0%        {-webkit-transform: rotate(0deg);left:0px;}
            50%        {-webkit-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {-webkit-transform: rotate(-360deg);left:0px;}
        }
        /* Safari and Chrome */
        @-moz-keyframes animate_div1
        {
            0%      {-moz-transform: rotate(0deg);left:0px;}
            50%     {-moz-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {-moz-transform: rotate(-360deg);left:0px;}
        }
        /* Opera */
        @-o-keyframes animate_div1
        {
            0%      {-o-transform: rotate(0deg);left:0px;}
            50%     {-o-transform: rotate(360deg);left:100px;background-color:#1ec7e6;}
            100%    {-o-transform: rotate(-360deg);left:0px;}
        }

        @keyframes animate_div2
        {
            0%      {transform: rotateY(0deg);left:0px;}
            50%     {transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {transform: rotateY(-360deg);left:0px;}
        }
        /* Firefox */
        @-webkit-keyframes animate_div2
        {
            0%      {-webkit-transform: rotateY(0deg);left:0px;}
            50%     {-webkit-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-webkit-transform: rotateY(-360deg);left:0px;}
        }Y
        /* Safari and Chrome */
        @-moz-keyframes animate_div2
        {
            0%      {-moz-transform: rotateY(0deg);left:0px;}
            50%     {-moz-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-moz-transform: rotateY(-360deg);left:0px;}
        }
        /* Opera */
        @-o-keyframes animate_div2
        {
            0%      {-o-transform: rotateY(0deg);left:0px;}
            50%     {-o-transform: rotateY(360deg);left:0;background-color:#1ec7e6;}
            100%    {-o-transform: rotateY(-360deg);left:0px;}
        }    

详细查看例子(右键查看源文件): DEMO

更多资料:http://www.w3school.com.cn/css3/css3_animation.asp