欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS3的过渡和转换

程序员文章站 2022-03-20 21:53:46
CSS3的过渡和转换 1.过渡 什么是过渡呢？过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性： transition:是一个简写属性，用于设置四个过渡属性，所以说我们用的时候只写这个属性就行了。 transition-property：规定应用过渡效果的属性（可以设置单个 ......
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后开始执行过渡效果。

 

　　代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡效果</title>
 6     <style type="text/css">
 7         .square{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             transition: width 0.4s linear 0.6s;/*规定属性width 0.4s 匀速 完成过渡效果 延时0.6s完成*/
12         }
13         .square:hover{width: 300px;}
14     </style>
15 </head>
16 <body>
17     <div class="square"></div>
18 </body>
19 </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轴移动，正为向下，负为向上

　　　　　　　　　　　　CSS3的过渡和转换

　　　　　　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旋转

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

　　

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

 

.square { width: 100px; height: 100px; background: red } .square:hover { width: 300px }

上一篇： jQuery图片加载失败替换默认图片方法汇总

下一篇： JavaScript数据结构之双向链表和双向循环链表的实现

推荐阅读