css3animation动画

最新推荐文章于 2023-07-13 00:41:58 发布

htmld

最新推荐文章于 2023-07-13 00:41:58 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/htmld/article/details/30050659

本文深入探讨了CSS3动画的核心概念，通过实例展示了如何使用关键帧动画实现复杂的动态效果。从动画的基本原理到高级应用，一文带你掌握CSS3动画的精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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