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. mysql 主从复制--启动操作start slave, stop slave

    在MySQL配置主从关系时,会用到start slave, stop slave命令,本文简单介绍两个命令的使用方法和作用. start slave mysql> start slave 不带任 ...

  2. 日期控件My97 DatePicker 的使用

    1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPE html> <h ...

  3. 小米笔记本装MAC(黑苹果),外接USB蓝牙,禁止笔记本自带的蓝牙方法

    https://blog.daliansky.net/ 解决插入耳机没有声音问题,每次开机需要重新插拔一次:https://github.com/daliansky/XiaoMi-Pro/blob/m ...

  4. linux 内存映射-ioremap和mmap函数

    最近开始学习Linux驱动程序,将内存映射和ioremap,mmap函数相关资料进行了整理 一,内存映射  对于提供了MMU(存储管理器,辅助操作系统进行内存管理,提供虚实地址转换等硬件支持)的处理器 ...

  5. 初识React:使用React完成Hello World程序

    正式学习React之前,通过一个简单的Hello Word程序来感受一下. <!DOCTYPE html> <html lang="zh-cn"> < ...

  6. Java8新特性值Lambda --->匿名函数

    Lambda:表达式(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda abstraction),是一个匿名 ...

  7. FB的破解与安装

    1使用破解序列号安装 先找到host文件,一般可能是隐藏的windows/system32/drivers/etc在下面加入127.0.0.1 activate.adobe.com127.0.0.1 ...

  8. this、apply/call、bind、闭包、函数、变量复制

    一.实际场景中抽象出的一个问题 下面this各指向什么? var a = { b: function() { console.log(this); }, f: function() { var c = ...

  9. java浅析final关键字

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  10. tomcat操作

    一.启动 D:\tomcat8.5.9\bin\startup   或者  D:\tomcat8.5.9\bin\catalina start 关闭tomcat: D:\tomcat8.5.9\bin ...