前端复习笔记——CSS3常用特性

1.transition，字面上翻译过来是“过渡、转变”的意思，在css3的教程里http://www.w3school.com.cn/css3/是过渡的意思。

它用的综合语法是：transition：property duration timing-function delay；（属性、持续时长、过渡效果的时间曲线、延迟时间）

例子：

div{
  width:100px;
  height:100px;
  background:yellow;
  transition:width 2s;
  -moz-transition:width 2s; /* Firefox 4 */
  -webkit-transition:width 2s; /* Safari and Chrome */
  -o-transition:width 2s; /* Opera */
}
div:hover{
  width:300px;

}

2.transform：转换，可以是2D转换和3D转换。

（1）2D转换：

transform：translate（x，y）；向水平方向、垂直方向移动的距离。

transform：rotate（90deg）；元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transform：scale（2,4）；元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，例如：2，4代表宽的2倍，高的4倍。

transform：skew（20deg，30deg）；元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform：matrix（）；方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

3.@keyframes 规则动画。

 

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

例子：

 

@keyframes myfirst{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */{
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

div{
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;	/* Firefox */
  -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
  -o-animation: myfirst 5s;	/* Opera */
}

 

4.字体设置

 

 

@font-face{
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9+ */
}

div{
  font-family:myFirstFont;
}

5.css3文本效果

text-shaow:1px 1px 1px #ccc; 文字阴影。

word-wrap：break-word;可对单词拆分换行。