CSS3注意点

1、background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。注意：背景色是不起作用的

2、background-clip背景剪裁属性是从指定位置开始绘制。也有三个值content-box, padding-box,和 border-box

3、css3渐变，渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

　 repeating-linear-gradient() 函数用于重复线性渐变，需要设置高度，和每个循环颜色的占高比例

#grad1 {
　　height: 800px;

　　background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

4、字体定义

@font-face{
    font-family: myFirstFont;  //规定字体的名称
    src: url('Sansation_Light.ttf')  //定义字体文件的 URL。
        ,url('Sansation_Light.eot'); /* IE9 */
}
div{
    font-family:myFirstFont;
}

相当于是定义了一个字体变量，在稍后的css样式中引用此字体变量

5、2D和3D转换

transform（转换）是用于元素的转换属性，向元素应用 2D 或 3D 转换。属性值是一个函数，有：

translate() 移动
rotate() 旋转
scale() 缩放
skew() 倾斜
matrix() 混合转换

6、css3过渡动画，某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。使用元素属性transition（过渡）

有三点

指定要添加效果的CSS属性
指定效果的持续时间。
最终触发时的状态

div{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover{
    width:300px;
}

要添加多个样式的变换效果，添加的属性由逗号分隔：

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

注意：转换transform属性也可以用于过渡动画

7、@keyframes关键帧动画

实质就是使用@keyframes规则创建一个自定义的动画，然后使用css属性animation执行这自定义的动画名称

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;   //此处是使用自定义的动画
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

//以下是自定义动画名称
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注意一个属性animation-fill-mode，规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。即可以使动画停留在最后的状态

猜你喜欢