CSS3动画效果

　　CSS3的动画需要遵循‘@Keyframes规定

　　　　规定动画的时长

　　　　规定动画的名称

下面是个例子

在.html文件中

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>动画</title>
 6     <link rel="stylesheet" href="style04.css" type="text/css">
 7 </head>
 8 <body>
 9     <div> 动画效果</div>
10 </body>
11 </html>
复制代码

在.css文件中

复制代码
 1 div{
 2     width: 100px;
 3     height: 100px;
 4     background-color: red;
 5     position: relative;
 6     animation: anim 5s infinite alternate;/* infinite alternate 反复执行动画*/
 7     -webkit-animation: anim 5s infinite alternate; /*Safari 和 Chrome 浏览器*/
 8 }
 9 @keyframes anim
10 {
11     0%{
12         background-color: red;
13         left: 0px; top: 0px;
14     }
15 
16     25%{
17         background-color: blue;
18         left: 200px;top: 0px;
19     }
20 
21     50%{
22         background-color: antiquewhite;
23         left: 200px;top: 200px;
24     }
25 
26     75%{
27         background-color: blueviolet;
28         left: 0px;top: 200px;
29     }
30 
31     100%{
32         background-color: red;
33         left: 0px;top: 0px;
34     }
35 }
36 
37 @-webkit-keyframes anim{
38     0%{
39         background-color: red;
40         left: 0px; top: 0px;
41     }
42 
43     25%{
44         background-color: blue;
45         left: 200px;top: 0px;
46     }
47 
48     50%{
49         background-color: antiquewhite;
50         left: 200px;top: 200px;
51     }
52 
53     75%{
54         background-color: blueviolet;
55         left: 0px;top: 200px;
56     }
57 
58     100%{
59         background-color: red;
60         left: 0px;top: 0px;
61     }
62 }
复制代码

 

posted @   SoulCode  阅读(245)  评论(0)  编辑  收藏  举报
编辑推荐：
· 为什么构造函数需要尽可能的简单
· 探秘 MySQL 索引底层原理，解锁数据库优化的关键密码(下)
· 大模型 Token 究竟是啥：图解大模型Token
· 35岁程序员的中年求职记：四次碰壁后的深度反思
· 继承的思维：从思维模式到架构设计的深度解析
阅读排行：
· 【保姆级教程】windows 安装 docker 全流程
· 基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程
· 由 MCP 官方推出的 C# SDK，使 .NET 应用程序、服务和库能够快速实现与 MCP 客户端
· 电商平台中订单未支付过期如何实现自动关单？
· X86-64位简易系统开发 - 从BIOS阶段开始
点击右上角即可分享
微信分享提示