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 过渡动画 ...
随机推荐
- 蜗牛—ORACLE基础之触发器学习(三)
版权声明:本文为大腰子原创文章,如若转载,请标明原地址. https://blog.csdn.net/u010071361/article/details/30037215 建立一个触发器, 当职工表 ...
- 让Editplus支持sql语法高亮显示
版权声明:作者:jiankunking 出处:http://blog.csdn.net/jiankunking 本文版权归作者和CSDN共同拥有,欢迎转载.但未经作者允许必须保留此段声明,且在文章页面 ...
- Android 常用的权限
添加WiFi以及访问网络的权限: <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE&q ...
- 2.5链表 链式A+B
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAowAAAGpCAIAAACI2PCZAAAgAElEQVR4nO2d3YsdSX6m++/wXf8Fxu ...
- CodeBackUP_node_find_serial
/*************************************************************** ** Find the serial number Node ** R ...
- javascript常见的20个问题与解决方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PAT天梯赛 L2-019. 悄悄关注 【STL】
题目链接 https://www.patest.cn/contests/gplt/L2-019 思路 将已关注的人 用 MAP存起来 然后将点赞的用户中 没有关注的 用 VECTOR 存下来 并且求出 ...
- JAVA中最方便的Unicode转换方法
在命令行界面用native2ascii工具 1.将汉字转为Unicode: C:\Program Files\Java\jdk1.5.0_04\bin>native2ascii 测试 ...
- JsonSchema使用详解
JSON Schema是一个用于验证JSON数据结构的强大工具, 我查看并学习了JSON Schema的官方文档, 做了详细的记录, 分享一下. 我们可以使用JSON Schema在后续做接口测试中做 ...
- linux学习系列三
1. 账户与账户安全 账户和组是操作系统的基本概念,linux的组有基本组和附加组之分,一个用户只可以加入到一个基本组中国,但是可以加入到多个附加组中.创建用户时,系统默认会自动创建同名的组,并设置用 ...