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