CSS3的过渡和转换

1.过渡

  什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。

  过渡的属性:

属性  描述 css
transition 简写属性,用于在一个属性中设置4个过渡属性 3
transition-property 规定应用过渡的css属性的名称 3
transition-duration 定义过渡效果所花费的时间。默认为0 3
transition-timing-function 规定过渡效果的时间曲线。默认是“ease” 3
transition-delay 规定过渡效果何时开始。默认是 0  3

  transition:是一个简写属性,用于设置四个过渡属性,所以说我们用的时候只写这个属性就行了。

  transition-property:规定应用过渡效果的属性(可以设置单个属性,也可以写所有属性(all))。请始终设置这个属性,否则忽略这个属性。(就像你想给你的心上人打电话,但是你不知道TA的手机号你能给他打电话吗?)

  transition-duration:规定完成效果所需要的时间(以秒或者毫秒来计算)。这个也是必须写的属性(假如没有就不执行,因为默认值为 0 )

  transition-timing-function:规定过渡效果的速度曲线。默认是“ease”。他有6个字属性:

    linear        规定以相同的速度开始至结束的过渡效果。

    ease         规定慢速开始,然后变快,然后慢速结束的过渡效果。

    ease-in       规定以慢速开始的过渡效果

    ease-out       规定以慢速结束的过渡效果

    ease-in-out     规定以慢速开始和结束的过渡效果

    cubic-bizier(n,n,n,n)  在cubic-bezier函数中定义自己的值。可能是值范围为 0~1 之间

  transition-delay:规定过渡效果从何时开始,即我们常说的延时。

  效果:0.6s后开始执行过渡效果。

 

  代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡效果</title>
<style type="text/css">
.square{
width: 100px;
height: 100px;
background: red;
transition: width 0.4s linear 0.6s;/*规定属性width 0.4s 匀速 完成过渡效果 延时0.6s完成*/
}
.square:hover{width: 300px;}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>

2.转换

  转换:向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动、或者倾斜

  属性:

    1.转换

        nooe              不进行转换

        matirx(n,n,n,n,n,n)        定义转换,使用6个值的距阵

        matirx3d(n,n,n,n,n,n,n,n,n,n,n,n)  定义3d转换,使用16个4*4的矩阵

      二维矩阵:matirx(n,n,n,n,n,n) ,就是基于水平方向和垂直方向重新定位元素

      三维矩阵:matirx(n,n,n,n,n,n) ,就是基于 X,Y,Z 三个方向重新定位元素

      此属性涉及数学中的矩阵,我在这里这是点一下就好。

    2.移动

        translate(x,y)          定义2d移动,即可向左右、上下移动

        translate3d(x,y,z)        定义3d移动,x y z 3个方向转动

      translate(x,y) 平面移动,X为x轴方形移动,正为向右,负为向左。Y为y轴移动,正为向下,负为向上

            

      translate3d(x,y,z) 同 translate(x,y)一样只不过多了一个z轴移动

    3.缩放

        scale(x,y)           定义2d缩放

        scale3d (x,y,z)          定义3d缩放

    4.旋转

        rotate(x,y)           定义2d旋转

        rotate3d(x,y,z)         定义3d旋转

  缩放和移动就很简单了,大家从字面上就可以理解。

  

  因为这个只是在给大家举例子,所一说我就没有加前缀,希望大家在写的时候加上前缀。谢谢大家!!

CSS3的过渡和转换的更多相关文章

  1. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  2. 移动开发day1_过渡_2d转换_3d立体

    今天是就业班开班的第一天,上完了一天的课,做点总结. 什么叫做移动web 专门在手机或者 平板电脑 浏览器网页 为什么要学习移动web 工资高 1. 人拥有的手机数 大于 电脑的个数 2. 微信 1. ...

  3. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  4. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  5. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

  6. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  7. CSS3新特性—过渡、转换

    过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代 ...

  8. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...

  9. CSS3动画属性:转换(transition)

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

随机推荐

  1. java-常用注解

    JDK自带注解 @Override 重写, 标识覆盖它的父类的方法 @Deprecated   已过期,表示方法是不被建议使用的 @Suppvisewarnings 压制警告,抑制警告 元注解 @Ta ...

  2. SmartGit过期解决办法

    1. 快捷键win+R ,输入:%APPDATA%\syntevo\SmartGit\2. 进入smart的版本 如18.1 然后删除setting.xml文件

  3. R3注入的四种方式

    DLL注入 1.首先要获取想要注入的进程句柄(OpenProcess) 2.从要注入的进程的地址空间中分配一段内存(VirtualAllocEx) 3.往分配的内存位置写入要注入的DLL名称(Writ ...

  4. Apache Kafka监控之Kafka Web Console

    Kafka Web Console:是一款开源的系统,源码的地址在https://github.com/claudemamo/kafka-web-console中.Kafka Web Console也 ...

  5. Spark任务提交jar包依赖解决方案

    转载自:http://blog.csdn.net/wzq294328238/article/details/48054525                    通常我们将Spark任务编写后打包成 ...

  6. Mibew Messenger (also known as Open Web Messenger)

    Mibew Messenger (also known as Open Web Messenger) is an open-source live support application writte ...

  7. oracle--合并行数据(拼接字符串),获取查询数据的前3条数据...

    --标准函数Lpad 可以实现左补零,但是如果多于需要长度,则会截断字符串 SELECT LPAD ('1' , 3 , '0') FROM DUAL -- return 001 情况一:需要补零.  ...

  8. VS2012打开项目——已停止工作

    VS2012打开项目——已停止工作 解决方法如下: 1. 开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Studio Tools ...

  9. 黄聪:PHP JSON_ENCODE 不转义中文汉字的方法

    ios程序中不识别读取到的JSON数据中 \u开头的数据. PHP 生成JSON的时候,必须将汉字不转义为 \u开头的UNICODE数据. 网上很多,但是其实都是错误的,正确的方法是在json_enc ...

  10. spring 基本配置学习

    1.bean的方式说明 作用:    用于配置对象让spring来创建的. 默认情况下它调用的是类中的无参构造函数.如果没有无参构造函数则不能创建成功. 属性: id:给对象在容器中提供一个唯一标识. ...