css3animation动画

来源：互联网发布：lol网络不卡瞬移编辑：程序博客网时间：2024/04/28 17:25

<!DOCTYPE html>
<html lang="en">
<head>
<title>css3animation动画</title>
<meta charset="utf-8" />
<style type="text/css">
@keyframes alt{
0% {background-color: red;left:400px;top:0px;}
25% {background-color: blue;left:800px;top:0px;}
50% {background-color: green;left:800px;top:400px;}
75% {background-color: purple;left:400px;top:400px;}
100% {background-color: pink;left:400px;top:0px;}
}
@-webkit-keyframes alt{/*Safari 和 Chrome*/
0% {background-color: red;left:400px;top:0px;}
25% {background-color: blue;left:800px;top:0px;}
50% {background-color: green;left:800px;top:400px;}
75% {background-color: purple;left:400px;top:400px;}
100% {background-color: pink;left:400px;top:0px;}
}
@-moz-keyframes alt{/*Firefox*/
0% {background-color: red;left:400px;top:0px;}
25% {background-color: blue;left:800px;top:0px;}
50% {background-color: green;left:800px;top:400px;}
75% {background-color: purple;left:400px;top:400px;}
100% {background-color: pink;left:400px;top:0px;}
}
@-o-keyframes alt{/*Opera*/
0% {background-color: red;left:400px;top:0px;}
25% {background-color: blue;left:800px;top:0px;}
50% {background-color: green;left:800px;top:400px;}
75% {background-color: purple;left:400px;top:400px;}
100% {background-color: pink;left:400px;top:0px;}
}

.d{
text-align: center;
position: relative;
padding:5px;
width: 100px;
border: 1px solid #5D81AB;
border-radius: 10px;
animation: alt 5s linear infinite alternate;/* Firefox: */
-moz-animation: alt 5s linear infinite alternate;/* Safari 和 Chrome: */
-webkit-animation: alt 5s linear infinite alternate;/* Opera: */
-o-animation: alt 5s linear infinite alternate;
}

</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="d">animation动画</div>
<div class="d"></div>

</body>
</html>

0 0