annimation动画

最新推荐文章于 2024-03-08 16:33:56 发布

Ctrl丶

最新推荐文章于 2024-03-08 16:33:56 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： annimation css3动画 css3

本文链接：https://blog.youkuaiyun.com/Mr_Wu__/article/details/80663760

本文介绍了一个使用CSS实现的动画效果案例，包括元素的旋转、移动、颜色变换等基本动画操作。通过定义关键帧动画，实现了从初始状态到最终状态的一系列过渡效果。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>annimation动画效果</title>
<style type="text/css">
.annimation{
width: 200px;
height: 200px;
background-color: aquamarine;
animation:xuanz 5s infinite;
opacity: 1;
position: relative;
margin: 0 auto;
margin-top:100px ;

}
@keyframes xuanz{
0%{background-color: white; transform: rotate(20000deg); top: 0; left: 30px; border-radius: 0%;}
25%{background-color: #33B5E5;top: 300px; left: 0; border-radius: 20%;}
50%{background-color: #5F9EA0; top: 0; left: -300px; border-radius: 40%;}
75%{background-color: #7CFC00; top: 0; left: 500px; border-radius: 50%;}
100%{background-color: pink; top: 0; left: 0; border-radius: 0%;}
}
</style>
</head>
<body>
<h1>首先能这篇文章主要是针对annimation动画效果的一个笔记</h1>
<h2>这个动画将实现旋转，移动，变色，变化，等一系列简单的动画</h2>
<hr />
<hr />
<div class="annimation"></div>
</body>
</html>