常用 CSS3 笔记

布局

裁剪,元素要绝对定位

参数:四个点分别为上边距,右边距,下边距,左边距,值均相对左上角那个点

clip:rect(<number>|auto <number>|auto <number>|auto <number>|auto);

盒子

阴影

参数:左右偏移,上下偏移,模糊度,阴影大小,颜色

box-shadow:none | <shadow> [ , <shadow> ]*

边框

圆角

参数:上左,上右,下左,下右

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

背景

大小

参数:高宽 || 填充方式等

background-size：<bg-size> [ , <bg-size> ]*

多个背景,参数用,分割

background:url(),url();

文字

阴影

参数:跟盒子一样

text-shadow：none | <shadow> [ , <shadow> ]*

换行

参数:换行或不换行

white-space：normal | pre | nowrap | pre-wrap | pre-line

内容

修改

参数:图片,文字等

用户接口

轮廓(跟边框外边框)

参数:轮廓的宽度,样式,颜色

outline：[ outline-width ] || [ outline-style ] || [ outline-color ]

变形

变形至,均针对块状元素

参数:矩阵变形,左移,右移,放大,缩小,倾斜,旋转

transform：none | matrix(<number>,<number>,<number>,<number>,<number>,<number>)? translate(<length>[,<length>])? translateX(<length>)? translateY(<length>)? rotate(<angle>)? scale(<number>[,<number>])? scaleX(<number>)? scaleY(<number>)? skew(<angle>[,<angle>])? skewX(<angle>) || skewY(<angle>)?

变形开始时位置

参数:坐标

/*************** 动画效果 *****************/

过渡

css默认属性至伪属性的动画变动效果,如hover

参数:需要变动的样式,动画时长,类型,延时

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

动画

定义动画过程

方式一

@keyframes 动画名{

%0{} /*CSS列表*/

%100{}/*css列表*/

}

方式二

@keyframes 动画名{

from{}/*css列表*/

to{}/*css列表*/

}

使用定义动画过程,动画完成时,将到回到原样式,所以要保持动画效果请定义样式与动画结果样式相同

参数:动画过程,持续时间,动画类型,开始前延时,循环次数,是否方向运动

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*

/*********** 脚本控制CSS动画 ***********/

1. 修改style.animationName 的值,此方法动画完成后变为指定的CSS效果,需要监听animationend等动画事件,

完成时指定到动画完成时的CSS值.

2. 增加一个选择器,如class ,id等,改选择器已定义CSS动画效果,动画完成时保持了该效果,但定义动画过程为

@keyframes 动画名{

from{}/*css列表*/

to{}/*css列表*/

}

时,必须保证有from及to两个,缺一不可,否则无动画效果.

示例:

View Code

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style>
span{
    display:block;/*变形必须*/
    height:50px;
    font:bold 14px/50px Georgia;
    animation:animations 2s ease-out;
}
@keyframes animations{
    0%{transform:translate(0);}
    50%{transform:translate(30px);}
    70%{transform:translate(35px);}
    100%{transform:translate(60px);background:#f00;}
}
.bb{
    transform:translate(0px,100px);
    animation:good 2s ease-out;
}
@keyframes good{
    from{/* 脚本修改必须有*/
        transform:translate(0px);
    }
    to{transform:translate(0px,100px);}
}
</style>
</head>
<body>
<div>
    <span id="a1">CSS3 Animations</span>
</div>
<script>
    setTimeout(function(){
        var a1=document.getElementById('a1');
        a1.className="bb";
    },5000);
    setTimeout(function(){
        var a1=document.getElementById('a1');
        a1.className="";
        a1.addEventListener("animationend", function(){
          a1.style.transform="translate(0px,100px)";  
        }, false);
        a1.animationName="good";
    },10000);
</script>
</body>
</html>

CSS 版面变灰色:

html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE 6-9 */
}