css动画和渐变
变形：
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
元素的变形：transform
transform:none | <transform-function>
none：默认值，不设置变形
<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画之简单变化</title>
<style type="text/css">
ul {
margin-top: 30px;
list-style: none;
line-height: 25px;
font-family: Arial;
font-weight: bold;
}
li {
width: 120px;
float: left;
margin: 2px;
border: 1px solid #cccccc;
background-color: #e4e4e4;
text-align: left;
}
li:hover {
background-color: #;
}
a {
display: block;
padding: 5px 10px;
color: #;
/*text-decoration 属性规定添加到文本的修饰。如下划线等*/
text-decoration: none;
/*定义原点 */
transform-origin: ;
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*旋转 */
transform:rotate(30deg);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*移动 */
transform:translate(5px,5px);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*缩放 */
transform:scale(0.8,1.5);
}
li:nth-child():hover a{
background-color: #f90;
/*字体颜色 */
color: #FF3321;
/*倾斜 */
transform:skew(30deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">html </a></li>
<li><a href="#">css </a></li>
<li><a href="#">flash</a></li>
<li><a href="#">ps</a></li>
</ul>
</body>
</html>
旋转：rotate(<angle>)
angle：旋转角度，代为deg，正值顺时针，负值逆时针。
缩放和翻转：scale(<x>,<y>)
<x>：水平方向放大倍数
<y>：垂直方向放大倍数
注释：中间用逗号隔开数值，大于1表示放大，小于1表示缩放。为负数表示翻转。如果y值省略，会水平方向和垂直方向上放大或缩放相同倍数。
移动：translate(<dx>,<dy>)
<dx>：元素在水平方向上的偏移距离
<dy>：元素在垂直方向上的偏移距离
注释：<dx><dy>可为负值或带小数的的值。偏移方向不解释。若<dy>的值省略，则垂直偏移距离为0
倾斜：skew(<x-angle>,<y-angle>)
<x-angle>：元素在空间x轴上的倾斜角度
<y-angle>：元素在空间y轴上的倾斜角度
注释：<x-angle><y-angle>单位deg，值为正，顺时针，值为负，逆时针。若<y-angle>值省略，则在垂直方向上的倾斜角度为0deg
矩阵变形：省略吧先，以后研究。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过渡效果</title>
<style type="text/css">
div {
margin: 100px auto;
width: 200px;
height: 100px;
background-color: #00f;
/*总写 */
/*transition:all 1000ms linear 500ms;*/
/*分写 */
transition-propety:all;
transition-duration:1s;
transition-dely:0.5s;
transition-tinming-funtion:liner;
}
div:hover {
background-color: #f90;
transform:rotate(200deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
定义变形原点：transform-origin
transform-origin:<x> <y>
<x>：定义变形原点的x位置
<y>：定义变形原点的y位置
注释：<x>默认值是50%，取值包括left、center、right、百分比值，长度值
<y>默认值是50%，取值包括top、middle、bottom、百分比值、长度值
过渡效果：transition：transition-property | transition-duration | transition-timing-function | transition-delay
transition-property：定义过渡属性
none：没有过渡效果
all：默认值，所有的css属性都有过渡效果
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果
transition-duration：定义过渡过程的需要的时间
<time>：时间可以是秒或毫秒，默认是0
transition-timing-function：定义过渡方式
linear：一直是同一速度
ease：先慢，再快，最后非常慢
ease-in：先慢，再快，直至结束
ease-out：先快，再慢，直至结束
ease-in-out：在开始和结束时，都很慢
cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，参数为0到1的数字。
transition-delay：定义开始过渡的延迟时间
<time>：同transition-duration中的<time>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
关键帧动画：@keyframes <animationname> {<keyframes-selector>{<css-styles>}}
<animationname>：动画的名称，用于绑定
<keyframes-selector>：动画持续时间的百分比
<css-styles>：设置样式
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>关键帧动画</title>
<style type="text/css">
div {
position: absolute;
-moz-animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@-moz-keyframes mymove{
0% {top:0px;}
25% {top:200px;left: 200px}
75% {top:50px;left: 10px}
100% {top:100px;left: 60px}
}
@-webkit-keyframes mymove{
0% {top:0px;}
25% {top:200px;left: 200px}
75% {top:50px;left: 10px}
100% {top:100px;left: 60px}
}
</style>
</head>
<body>
<div><img src="54图片\图1.jpg" width="250" height="200"></div>
</body>
</html>
解释：那个百分比指的是时间，即时间轴
动画属性：animation:
-name：动画的名称，类似于Flash中的元件
none：没有动画
<keyname>：动画名称
-duration：定义动画播放的周期时间
<time>：略
-timing-function
linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n)
-delay：动画播放延迟时间
<time>
-iteration-count：定义播放次数
infinite：无限次播放
<n>；确定的次数，默认是1
-direction：播放的方向
normal：默认值
alternate:与上一周期方向相反
css动画和渐变的更多相关文章
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- CSS动画总结与呼吸灯效果
首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...
- 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画
Xuijs超轻量级的框架+Emile CSS动画效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS 动画一站式指南
CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...
随机推荐
- Django之权限用法
**记住每一个url都是一个权限** 注册 可插拔试的权限,可以先写其他的逻辑,在最后再把权限加上 将rbac组件拷贝到项目上,注册项目 修改表结构 将写好的用户表对rbac的User表进行一对一的关 ...
- shell中替换json中指定的值
在linux中部署软件的时候,有时会遇到用shell动态改动json格式的配置文件,比如一下rabbitmq.json文件: { "rabbitmq": { "ssl&q ...
- 3.09课·········for循环
for循环:反复执行某段代码.for循环四要素:初始条件,循环条件,循环体,状态改变.for(初始条件;循环条件;状态改变){ 循环体} 若初始条件满足循环条件,则进入循环体,执行完循环体,跳回到状态 ...
- 【leetcode刷题笔记】Distinct Subsequences
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- 【leetcode】Balanced Binary Tree
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- Spring层面的事务管理
事务管理方式 1. 编程式事务管理 2. 声明式事务管理 建立于AOP之上,对指定的方法执行前后进行拦截,即在方法执行前开始或加入一个事务,执行完毕后根据结果提交或回滚事务. 方式: a. 配置文件中 ...
- NetBeans字体设置
01.找到自己java字体目录.我的目录是[C:\Program Files\Java\jdk1.7.0_21\jre\lib] 02.复制fontconfig.properties.src, 重命名 ...
- B表中的pid对应A表中id，查询A表中数据，根据b表中对应a表中该id的数据数目排序
B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序 select a.*,count(*) as c from a left join b on a.id=b.ai ...
- JDK8新特性：接口的静态方法和默认方法
在jdk8之前,interface之中可以定义变量和方法,变量必须是public.static.final的,方法必须是public.abstract的.由于这些修饰符都是默认的,所以在JDK8之前, ...
- 《python基础教程（第二版）》学习笔记 字典（第4章）
<python基础教程(第二版)>学习笔记 字典(第4章)创建字典:d={'key1':'value1','key2':'value2'}lst=[('key1','value1'),(' ...