css3实现动画横幅

最新推荐文章于 2023-08-10 15:18:10 发布

无法预知未来

最新推荐文章于 2023-08-10 15:18:10 发布

阅读量1.5k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/sinat_26987533/article/details/48319625

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

无法预知未来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3实现动画横幅

动画横幅 /*动态横幅*/ 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;
复制链接

扫一扫