变形：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

元素的变形：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动画和渐变的更多相关文章

  1. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  2. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  3. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  6. CSS动画总结与呼吸灯效果

    首先,先介绍一下主要用到的css属性:animation,text-shadow. text-shadow就不再介绍了,上一篇已经详细介绍了用法.这里先介绍一下animation属性. 1.anima ...

  7. 跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画

    Xuijs超轻量级的框架+Emile CSS动画效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

随机推荐

  1. 我的Android进阶之旅------>四种呼叫转移场景

    运行商为我们提供了如下4中呼叫转移场景: 1.始终进行呼叫转移:不管当前手机处于何种状态,来电都会被转移到指定的电话号码上.在使用这种呼叫转移时应当非常小心,如果启用了这种呼叫转移,你可就永远也接不着 ...

  2. git克隆远程分支

    $ git branch –r 查看远程branch信息 $ git checkout origin/dev检出远程分支 $ git branch -a 查看所有分支,包括本地和远程 可以使用chec ...

  3. 程序运行之ELF 符号表

    当一个工程中有多个文件的时候,链接的本质就是要把多个不同的目标文件相互粘到一起.就想玩具积木一样整合成一个整体.为了使不同的目标文件之间能够相互粘合,这些目标文件之间必须要有固定的规则才行.比如目标文 ...

  4. vim python缩进等一些配置

    VIM python下的一些关于缩进的设置: 第一步:  打开终端,在终端上输入vim ~/.vimrc,回车.  第二步:  添加下面的文段: set filetype=python au BufN ...

  5. Windows存储管理之磁盘类型简介

    各种操作系统连接到存储系统之后,并且操作系统识别物理磁盘之后,需要对磁盘进行进一步配置.如果用户连接存储是的Windows Server,存储管理员势必需要了解Windows中的磁盘类型与文件系统.笔 ...

  6. C语言程序设计50例(经典收藏)之1

    题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #includ ...

  7. Linux Shell 下的输出重定向

    linux 环境中支持输入输出重定向,用符号<和>来表示. 0.1和2分别表示标准输入.标准输出和标准错误信息输出, 可以用来指定需要重定向的标准输入或输出,比如 2>a.txt 表 ...

  8. 隐藏c语言烦人的{ }

    .vimrc文件中添加 autocmd BufNewFile,BufRead * :syn match braces conceal "[{}]" set conceallevel ...

  9. Data Structure Array: Maximum circular subarray sum

    http://www.geeksforgeeks.org/maximum-contiguous-circular-sum/ #include <iostream> #include < ...

  10. Qt事件机制（是动作发生后，一种通知对象的消息，是被动与主动的总和。先处理自己队列中的消息，然后再处理系统消息队列中的消息）

    Qt事件机制 Qt程序是事件驱动的, 程序的每个动作都是由幕后某个事件所触发.. Qt事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. Qt事件的类型很多, 常见的qt的事件如下: 键盘事 ...