跟随我在oracle学习php（14）
CSS3的@keyframes用法详解:
此属性与animation属性是密切相关的，关于animation属性可以参阅CSS3的animation属性用法详解一章节。
一.基本知识:
keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
语法结构:
@keyframes animationname {keyframes-selector {css-styles;}}
参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等价于 0% 和 100%。
建议始终使用百分比形式。
二.代码实例:
实例一:
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title></title>
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-ms-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
复制代码
复制代码
上面代码实现了简单的动画，下面简单做一下分析:
1.使用@keyframes定义了一个名为theanimation的动画。
2.@keyframes声明的动画名称要和animation配合使用。
3.from to等价于0%-100%，所以就是规定5s内做了一件事情。
实例二:
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
跟随我在oracle学习php（14）的更多相关文章
- Oracle 学习笔记 14 -- 集合操作和高级子查询
Oracel提供了三种类型的集合操作:各自是并(UNION) .交(INTERSECT). 差(MINUS) UNION :将多个操作的结果合并到一个查询结果中,返回查询结果的并集,自己主动去掉反复的 ...
- 跟随我在oracle学习php（19）
Order by子句 形式: order by 排序字段1 [排序方式], 排序字段2 [排序方式], ..... 说明: 对前面取得的数据(含from子句,where子句,group子句, ...
- 跟随我在oracle学习php（18）
修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter table 表名 add [column] 字段名 字段类 ...
- 跟随我在oracle学习php（17）
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- 跟随我在oracle学习php（16）
数据库的增删改查 增:create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]: 说明: 1,if n ...
- 跟随我在oracle学习php（15）
开发环境 独立开发环境:组成 Windows/Linux php Apache MySQL 集成开发环境:phpstudy wamp xammp 关系数据库: SQL: Struct Query La ...
- 跟随我在oracle学习php（13）
常用的css样式 [class~="col-6"]:选择我所有类名中包含有col-6独立单词的元素 [class*="col-"]:选择所有类名中含有" ...
- 跟随我在oracle学习php（12）
DOM 文档对象模型 body:(什么时候)找到标签 操作标签找到标签:(都会返回一个js对象)document.getElementById() 通过iddocument.getElementsBy ...
- 跟随我在oracle学习php（11）
数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...
随机推荐
- jsp页面在Android系统和ISO系统的兼容性问题
问题:一个jsp页面在Android手机上显示正常,但到了ISO系统上jsp页面的样式不显示了. 原因:css文件中设置样式时单位不兼容. 解决方案:将rem 转换成px;
- Transparent PageRoute in Flutter for displaying a (semi-) transparent page
import 'package:flutter/widgets.dart'; class TransparentRoute extends PageRoute<void> { Transp ...
- 程序员 面试题【前端，java，php】
跬步客 网址:https://www.kuibuke.com/wall/index
- ace-editor线上代码编辑器
package.json { "name": "vue-cli", "version": "1.0.0", " ...
- flutter测试页
import 'package:flutter/material.dart'; // 应用页面使用有状态Widget class AppScene extends StatefulWidget { @ ...
- python-Word模板填充-docxtpl
docxtpl 按指定的word模板填充内容 安装 pip install docxtpl 示例 from docxtpl import DocxTemplate data_dic = { 't1': ...
- ES6解构过程添加一个默认值和赋值一个新的值
const info = { name: 'xiaobe', } const { name: nickName = '未知' } = info; 其中nickName是解构过程中新声明的一个变量,并且 ...
- Mybatis映射文件中#取值时指定参数相关规则
Mybatis映射文件中#取值时指定参数相关规则 在#{}中,除了需要的数值外,还可以规定参数的一些其他规则. 例如:javaType,jdbcType,mode(存储过程),numericScale ...
- python函数注释,参数后面加冒号:,函数后面的箭头→是什么？
https://blog.csdn.net/sunt2018/article/details/83022493
- [Database]Oracle数据库中concat和||的区别
注:在oracle中,需要上述多次拼接应使用||,因为concat()一次只能拼接2个,需要多次嵌套.而在mysql中,可以实现concat(col1,col2,coln....) 官方文档链接:CO ...