CSS3简单的动画

浏览数：55 / 时间：2015年06月09日
果子狸有毒
<style>
.demo{
        width:80px;
        height:80px;
        text-align:center;
        line-height:80px;
        background:#f80;
        border:3px solid #eee;
        color:#fff;
        -webkit-animation: animate 3s .5s ease infinite alternate;
        -moz-animation: animate 3s .5s ease infinite alternate;
    }
@-webkit-keyframes animate{
        from {
            background:#f00;
            -webkit-transform:translate(0px) rotate(0deg);
            }
        to {
            background:#33C;
            -webkit-transform:translate(200px) rotate(360deg);
            }
    }
@-moz-keyframes animate{
        from {
            background:#f00;
            -moz-transform:translate(0px) rotate(0deg);
            }
        to {
            background:#33C;
            -moz-transform:translate(200px) rotate(360deg);
            }
    }        
</style>

<div class="demo">果子狸有毒</div>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log it for la io im ext class style log it for la io im ext

相关文章

随机文章

您可能还喜欢

您可能还喜欢