zoukankan
html css js c++ java
CSS3动画效果示例
CSS3动画遵循@kwyframes规则,规定了动画的名称、时长。
1、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画示例</title>
<style>
*{margin: 0;padding: 0}
section{100px;height: 100px;
background-color: coral;
position: relative;
animation: anim 3s infinite alternate;
-webkit-animation:anim 3s infinite alternate;
-moz-animation: anim 3s infinite alternate;
-o-animation: anim 3s infinite alternate;
margin: 50px auto; }
@keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-webkit-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-moz-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
@-o-keyframes anim {
0%{background-color: red;left: 0;top: 0;}
25%{background-color: green;left: 100px;top: 0;}
50%{background-color: blue;left: 100px;top: 100px;}
75%{background-color: yellow;left: 0;top: 100px;}
100%{background-color: purple;left: 0;top: 0;}
}
</style>
</head>
<body>
<section></section>
</body>
</html>
2.示例动画效果
查看全文
相关阅读:
【板子】博弈论
【洛谷】P1229快速幂
【洛谷】P1349广义斐波那契
2018.11.15 Nginx服务器的使用
2018.11.14 hibernate中的查询优化---关联级别查询
2018.11.13 Hibernate 中数据库查询中的Criteria查询实例
2018.11.12 Spring事务的实现和原理
2018.11.11 Java的 三大框架:Struts+Hibernate+Spring
2018.11.10 Mac设置Eclipse的 .m2文件夹是否可见操作&&Mac系统显示当前文件夹的路径设置
2018.11.9 Dubbo入门学习
原文地址:https://www.cnblogs.com/qikeyishu/p/7394050.html
最新文章
48-Python 安装pyautogui失败解决办法
45-二分查找实现
44-最长上升子序列
44-java断点调式dubug
43-将javaweb项目部署到Linux服务器
42-2017蓝桥杯b java
42-字符串到json 的错误 com.alibaba.fastjson.JSONObject cannot be cast to java.lang.String
41-牛栏-最短路径
【剑指offer】旋转数组的最小数字
【剑指offer】从尾到头打印链表
热门文章
【剑指offer】替换空格
【java】记录一下java的常用用法
【剑指offer】二维数组中的查找
【linux】记录一下遇到的各种问题
【gcc】更新下载编译gcc遇到的各种问题
【HDUOJ】几道递推DP
【HDUOJ】1257 最少拦截系统
【Codeforces】450 B(div2)
【洛谷】P1288 取数游戏II
【洛谷】P1247取火柴游戏
Copyright © 2011-2022 走看看