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.示例动画效果
查看全文
相关阅读:
mysql week 的使用方法
获取某个周在本年的开始日期和结束日期
question and answer
系统安装
adblock 下载地址
windows新增/修改/删除系统环境变量bat示例,一键配置JAVA_HOME
SpringMVC 复杂对象数据绑定
IntelliJ IDEA default settings 全局默认设置
Spring整合Ehcache管理缓存
label的for属性
原文地址:https://www.cnblogs.com/qikeyishu/p/7394050.html
最新文章
用户态和内核态
错误解决:error: expected ‘;’, ‘,’ or ‘)’ before ‘&’ token
判断大端小端
Linux下库文件的设置 (/usr/bin/ld: cannot find -lxxx 的解决办法)
Linux gcc中的LIBRARY_PATH 和 LD_LIBRARY_PATH
python剑指offer剪绳子
GBDT回归的原理及Python实现
回归树的原理及Python实现
旋转数组的最小数字
推荐系统中的稀疏矩阵处理
热门文章
交叉熵损失函数
二进制中1的个数
python递归与非递归实现斐波那契数列
用两个栈实现队列
python中sys.stdout、sys.stdin
Yii2 数据搜索类 PostSearch
yii2 数据提供者 dataProvider
yii2 Gridview网格小部件
php 数组模糊匹配
python 发送邮件脚本
Copyright © 2011-2022 走看看