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 过渡动画 ...
随机推荐
- CF451E Devu and Flowers(容斥)
CF451E Devu and Flowers(容斥) 题目大意 \(n\)种花每种\(f_i\)个,求选出\(s\)朵花的方案.不一定每种花都要选到. \(n\le 20\) 解法 利用可重组合的公 ...
- Linux系统监控的几个命令
uptime 系统时间.运行时间.连接数(没一个终端算一个连接).在1,5,15分钟内系统负载 uname -a 查看系统所有相关信息 -r 查看系统内核版本 -s 查看系统内核名 ...
- Smarty模板的逻辑运算符号稍微做一下总结
对Smarty模板的逻辑运算符号稍微做一下总结,以备后用. eq equal : 相等neq not equal:不等于gt greater than:大于lt less th ...
- java基础入门之数组排序冒泡法
public class ArrayTest03{ /* Name:数组排序,冒泡法 Power by :Stuart Date:2015-4-23*/ public static void main ...
- 改善程序与设计的55个具体做法 day2
条款05:了解C++默默编写并调用哪些函数 如果没有为类定义构造函数.析构函数.拷贝构造函数.重载赋值操作符,并且这些函数被需要(调用)时,编译器会为类生成默认的函数,而这些函数是public inl ...
- Yii2 如何实现表单事件之 Ajax 提交
前言 Yii2 现在使用 JS 都必须要注册代码了. 要实现 Ajax 提交,有两种方法.一是直接在 ActiveForm 调用 beforeSubmit 参数,但是个人认为这样没有很好的把 JS 和 ...
- P4773 红鲤鱼与绿鲤鱼
P4773 红鲤鱼与绿鲤鱼 暑假比赛的一个水题 总情况数:\(\dfrac{(a+b)!}{a!b!}\) 就是\(a+b\)条鲤鱼中选\(a\) or \(b\)的情况 反正我们会用完鲤鱼,则红鲤鱼 ...
- IE浏览器和CSS盒模型【转】
总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范 ...
- dedecms常用标签
下面总结了58种常见的标签调用,包括关键描述调用.指定调用栏目.列表文章调用.频道栏目调用.当前栏目名称.栏目导航调用.模板路径调用.网站标题调用.友情链接调用.网站版权调用.网站备案调用.当前位置调 ...
- sql优化,索引学习