你的位置:首页 > 网页设计

[网页设计]CSS知识总结(八)

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