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 过渡动画 ...
随机推荐
- 7 Javascript:表单与验证-非空验证
表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,能够利用getElementById()来訪问网页上不论什么一个元素 每一个表单域都有一个form对象,可被传给不论什么验证表单数据的函 ...
- python学习-1-列表，元组，字典，集合，文件操作
1. 列表.元组操作 names = ['Alex',"Tenglan",'Eric'] >>> names[0] >>> names[2] & ...
- selenium鼠标悬停操作
有些网页一打开会有一个弹窗,弹窗不消失无法进行取元素操作,只有把鼠标悬停在上面弹窗才会消失,这时就用到了selenium的悬停操作 鼠标悬停 move_to_element() 定位到要悬停的元素 ...
- mysql主从复制(windows下)
简单搭建mysql主从服务器(双向复制),仅供学习之用. 1.下载mysql-advanced-5.6.16-winx64.zip 下载完成后解压,重命名成mysql,分别放入两台服务器(看第二点集群 ...
- JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
- HDU2612 -暑假集训-搜索进阶N
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82828#problem/N这两天总是因为一些小错误耽误时间,我希望自己可以细心点.珍惜 ...
- 算法（Algorithms）第4版 练习 1.4.1
=N(N-1)(N-2)/6
- python第九篇：Python进程
Python进程 接下来我主要按照下图中思维导图上的关键点对进程和线程进行一个总结 进程知识点总结: 一.Python进程 1.概念 程序和进程: 程序:是可执行文件,是静态的,占据磁盘空间,程序 ...
- 给GridView删除列添加删除提示
首先设置CommandField,把ShowEditButton.ShowDeleteButton属性都设置为true,也可以只设置ShowDeleteButton属性,那样下面的代码你要修 ...
- 机器学习（十四）— kMeans算法
参考文献:https://www.jianshu.com/p/5314834f9f8e # -*- coding: utf-8 -*- """ Created on Mo ...