布局
裁剪,元素要绝对定位
参数:四个点分别为 上边距,右边距,下边距,左边距,值均相对左上角那个点
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
内容
修改
参数:图片,文字等
content：normal | none | [<attr> | <url> | <string> | counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote]+
用户接口
轮廓(跟边框外边框)
参数:轮廓的宽度,样式,颜色
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>)?
变形开始时位置
参数:坐标
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
/*************** 动画效果 *****************/
过渡
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 */
}