css3实现动画横幅

<!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>

无法预知未来

发布了33 篇原创文章 · 获赞 7 · 访问量 3万+

私信关注

猜你喜欢