您的位置：首页 > Web前端 > CSS

css3实现动画横幅

2015-09-09 18:19 489 查看 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>动画横幅</title>

<style>

/*动态横幅*/

p{

background:#000;

color:#fff;font:bold 20px Tahoma,Genven,sans-serif;padding:10px;

position:absolute;right:-165px;text-align:center;top:56px;width:380px;

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-o-transform:rotate(45deg);

-ms-transform:rotate(45deg);

transform:rotate(45deg);

-webkit-animation-name:glow;/*动画名次*/

-webkit-animation-duration:10s;/*动画总长度*/

-webkit-animation-iteration-count:infinite;/*动画重复播放次数  infinite 无限*/

-webkit-animation-timing-function:ease-in;/*动画类型 可选ease, linear, ease-out,ease-in-out和自定义类型cubic-bezier*/

-moz-animation-name:glow;

-moz-animation-duration:5s;

-moz-animation-iteration-count:infinite;

-moz-animation-timing-function:ease-in;

animation-name:glow;

animation-duration:5s;

animation-iteration-count:infinite;

animation-timing-function:ease-in;

}

@-webkit-keyframes glow{

0%{background:#F00;}

25%{background:#06C;}

50%{background:#000;}

75%{background:#06C;}

100%{background:#000;}

}

@-moz-keyframes glow{

0%{background:#F00;}

25%{background:#06C;}

50%{background:#000;}

75%{background:#06C;}

100%{background:#000;}

}

keyframes glow{

0%{background:#F00;}

25%{background:#06C;}

50%{background:#000;}

75%{background:#06C;}

100%{background:#000;}

}

</style>

</head>

<body>

<p> Css3 is awesome</p>

</body>

</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航