CSS知识总结（八）
2016-08-16 02:33
204 查看
CSS常用样式
8.变形样式
改变元素的大小，透明，旋转角度，扭曲度等。transform : none | <transform-function>
<transform-function>表示一个或多个变换函数，以空格分开，也就是说我们可以同时对一个元素进行transform的多种属性操作。
温馨提示：以往我们叠加效果都是用逗号隔开，但transform中使用多个属性时是用空格隔开。
1）translate()
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。
例子 源代码：
/* CSS代码 */
.box1{
width:200px;
height:50px;
border:1px solid #000;
}
.box1 p{
padding:0;
margin:0;
width:200px;
height:50px;
background:#ccc;
transform:translate(20px,20px);
}<!-- HTML代码 --> <body> <div class="box1"> <p>translate(20px,20px)</p> </div> </body>
效果：
translate(20px,20px)
2）translateX()
指定对象X轴（水平方向）的平移。
例子 源代码：
/* CSS代码 */
.box2{
width:200px;
height:50px;
border:1px solid #000;
}
.box2 p{
padding:0;
margin:0;
width:200px;
height:50px;
background:#ccc;
transform:translateX(20px);
}<!-- HTML代码 --> <body> <div class="box2"> <p>translateX(20px)</p> </div> </body>
效果：
translateX(20px)
3）translateY()
指定对象Y轴（垂直方向）的平移。
例子 源代码：
/* CSS代码 */
.box3{
width:200px;
height:50px;
border:1px solid #000;
}
.box3 p{
padding:0;
margin:0;
width:200px;
height:50px;
background:#ccc;
transform:translateY(20px);
}<!-- HTML代码 --> <body> <div class="box3"> <p>translateY(20px)</p> </div> </body>
效果：
translateY(20px)
4）rotate()
指定对象的2D rotation（2D旋转）。
例子 源代码：
/* CSS代码 */
.box4{
width:100px;
height:100px;
border:1px solid #000;
}
.box4 p{
padding:0;
margin:0;
width:100px;
height:100px;
background:#ccc;
transform:rotate(45deg);
}<!-- HTML代码 --> <body> <div class="box4"> <p>rotate(45deg)</p> </div> </body>
效果：
rotate(45deg)
5）transform-origin
指定元素的中心点。
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
例子 源代码：
/* CSS代码 */
.box5{
width:100px;
height:100px;
border:1px solid #000;
}
.box5 p{
padding:0;
margin:0;
width:100px;
height:100px;
background:#ccc;
transform-origin:0 0;
transform:rotate(15deg);
}<!-- HTML代码 --> <body> <div class="box5"> <p>rotate(15deg)</p> </div> </body>
效果：
rotate(15deg)
6）scale()
指定对象的2D scale（2D缩放）。
第一个参数表示水平方向缩放的倍数，第二个参数表示垂直方向的缩放倍数。如果第二个参数未提供，则默认取第一个参数的值。
例子 源代码：
/* CSS代码 */
.box6{
width:100px;
height:100px;
border:1px solid #000;
}
.box6 p{
padding:0;
margin:0;
width:100px;
height:100px;
background:#ccc;
transform:scale(0.8,0.8);
}<!-- HTML代码 --> <body> <div class="box6"> <p>scale(0.8,0.8)</p> </div> </body>
效果：
scale(0.8,0.8)
7）skew()
指定对象skew transformation（斜切扭曲）。
第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。如果第二个参数未设置，则默认值为0。
例子 源代码：
/* CSS代码 */
.box7{
width:100px;
height:100px;
border:1px solid #000;
}
.box7 p{
padding:0;
margin:0;
width:100px;
height:100px;
background:#ccc;
transform:skew(30deg,10deg);
}<!-- HTML代码 --> <body> <div class="box7"> <p>skew(30deg,10deg)</p> </div> </body>
效果：
skew(30deg,10deg)
如果设置"transform:skewX(30deg);"：
skewX(30deg)
如果设置"transform:skewY(30deg);"：
skewY(30deg)
9.过渡动画
1）过渡属性 （transition-property）设置对象中的参与过渡的属性。
默认值为：all，默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。
有过渡效果的属性：
例子 源代码：
/* CSS代码 */
.property{
width:200px;
height:100px;
border:1px solid #000;
background:#fff;
color:#000;
transition-property:background-color,color;
}
.property:hover{
background:#000;
color:#fff;
}<!-- HTML代码 --> <body> <p>请将鼠标移动到下面的矩形上：</p> <div class="property"> 设置过渡的属性： background-color , color </div> </body>
效果：
请将鼠标移动到下面的矩形上：
设置过渡的属性：
background-color , color
2）过渡所需时间（transition-duration）
设置对象过渡的持续时间，就是从旧属性过渡到新属性所花的时间。
如果提供多个属性值，以逗号进行分隔。
例子 源代码：
/* CSS代码 */
.duration{
width:200px;
height:100px;
border:1px solid #000;
background:#fff;
color:#000;
transition-property:background-color,color;
transition-duration:2s;
}
.duration:hover{
background:#000;
color:#fff;
}<!-- HTML代码 --> <body> <p>请将鼠标移动到下面的矩形上：</p> <div class="duration"> 过渡的时间是：2s </div> </body>
效果：
请将鼠标移动到下面的矩形上：
过渡的时间是：2s
3）过渡函数（transition-timing-function）
指过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况。
其中要包括以下几种函数：
①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))
②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))
③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))
⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。
例子 源代码：
/* CSS代码 */
.ease{
width:100px;
height:100px;
border:1px solid #000;
}
.ease-in{
margin-left:0px;
transition-property:all;
transition-duration:2s;
transition-timing-function:ease-in;
}
.ease-out{
margin-left:0px;
transition-property:all;
transition-duration:2s;
transition-timing-function:ease-out;
}
.ease:hover{
margin-left:200px;
}<!-- HTML代码 --> <body> <p>请将鼠标移动到下面的矩形上，并跟着矩形移动：</p> <div class="ease ease-in"> 加速 ease-in </div> <div class="ease ease-out"> 减速 ease-out </div> </body>
效果：
请将鼠标移动到下面的矩形上，并跟着矩形移动：
加速 ease-in
减速 ease-out
4）过渡延迟时间（transition-delay）
指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
例子 源代码：
/* CSS代码 */
.delay{
width:200px;
height:100px;
border:1px solid #000;
background:#fff;
color:#000;
transition-property:background-color,color;
transition-duration:2s;
transition-delay:1s;
}
.delay:hover{
background:#000;
color:#fff;
}<!-- HTML代码 --> <body> <p>请将鼠标移动到下面的矩形上：</p> <div class="delay"> 过渡延迟的时间是：1s </div> </body>
效果：
请将鼠标移动到下面的矩形上：
过渡延迟的时间是：1s
5）过渡动画缩写（transition）
transition : <transition-property> < transition-duration > <transition-timing-function> < transition-delay> , ……
例子 源代码：
/* CSS代码 */
.all{
width:208px;
height:100px;
border:1px solid #000;
background:#fff;
color:#000;
transition:all 2s ease-in 1s;
}
.all:hover{
background:#000;
color:#fff;
}<!-- HTML代码 --> <body> <p>请将鼠标移动到下面的矩形上：</p> <div class="all"> transition:all 2s ease-in 1s; 所有属性 过渡2s 加速 延迟1s </div> </body>
效果：
请将鼠标移动到下面的矩形上：
transition:all 2s ease-in 1s; 所有属性 过渡2s 加速 延迟1s
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习WEB标准总结的一些CSS/XHTML知识小结第1/3页
- 清新空气---我的.net(C#)生涯知识总结 跨CSS,JS,JAVA,AJAX,WPF,WCF,LINQ,ASP.NET,Winform,Sqlserver,Mysql,EF,OOP，开发工具等
- CSS知识总结
- 【CSS+DIV网页样式与布局】——基础知识总结
- 纯CSS制作圆角矩形框知识总结
- CSS知识总结
- CSS 相关知识总结
- HTML+CSS基础知识整理总结2015.3.11
- HTML+CSS基础知识整理总结2015.3.10
- css属性 知识总结
- 系统总结了一下CSS布局方面的知识
- HTML、css学习知识总结
- css 兼容性知识总结
- CSS Font知识整理总结
- CSS基础知识总结--《CSS权威指南》阅读笔记（一）
- 块级元素 内联元素 文档流 CSS 布局 知识小总结
- 对CSS基础知识学习的一些总结
- 黑马程序员-html+css基础知识总结
- CSS知识总结之浏览器（持续更新）
- HTML/CSS基础知识总结