CSS3基础

主要介绍css3

1. 2D转换

  • translate()移动

      div
      {
        transform: translate(50px,100px);
        -ms-transform: translate(50px,100px);		/* IE 9 */
        -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
        -o-transform: translate(50px,100px);		/* Opera */
        -moz-transform: translate(50px,100px);		/* Firefox */
      }
    
  • rotate()旋转

    div
    {
     transform: rotate(30deg);
     -ms-transform: rotate(30deg);		/* IE 9 */
     -webkit-transform: rotate(30deg);	/* Safari and Chrome */
     -o-transform: rotate(30deg);		/* Opera */
     -moz-transform: rotate(30deg);		/* Firefox */
    }
    
  • scale()拉伸

    div
    {
     transform: scale(2,4);
     -ms-transform: scale(2,4);	/* IE 9 */
     -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
     -o-transform: scale(2,4);	/* Opera */
     -moz-transform: scale(2,4);	/* Firefox */
    }
    
  • skew()倾斜

    div
    {
     transform: skew(30deg,20deg);
     -ms-transform: skew(30deg,20deg);	/* IE 9 */
     -webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
     -o-transform: skew(30deg,20deg);	/* Opera */
     -moz-transform: skew(30deg,20deg);	/* Firefox */
    }
    
  • matrix():

    需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

2. 3D转换

就是2D转换后加X、Y、Z、3D等表示在那个轴进行

如translate3d(x,y,z),translateX(x),translateY(y),translateZ(z)

3. 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

规定您希望把效果添加到哪个 CSS 属性上

规定效果的时长

长度

<style> 
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;
}
</style>

转换

<style> 
div
{
  width:100px;
  height:100px;
  background:yellow;
  transition:width 2s, height 2s;
  -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
  -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
  -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
  width:200px;
  height:200px;
  transform:rotate(180deg);
  -moz-transform:rotate(180deg); /* Firefox 4 */
  -webkit-transform:rotate(180deg); /* Safari and Chrome */
  -o-transform:rotate(180deg); /* Opera */
}
</style>

4. 动画

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

先用@keyframes创建动画,然后用animation绑定到div元素上。动画其实是上述过渡的更进一步。需要对各个浏览器进行匹配。

背景色

<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>

其他属性

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

5. 多列

简介

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

多列属性:

column-count

column-gap

column-rule

实例

<style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}
</style>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×