CSS入门到实践（五）

CSS动画特效

2D转换方法：translate(), rotate(), scale(),skew(),matrix()
3D转换方法：rotateX(),rotateY()

// 2D转换.div{transform:translate(100px,100px); //移动-webkit-transform:translate(100px,100px);//safari,chrome-ms-transform:translate(100px,100px) //IE-moz-transform:translate(100px,100px)  //firefox-o-transform:translate(100px,100px); //operatransform:rotate(180deg); //旋转180°transform:scale(1，2)  //缩放transform:skew(50deg,50deg) //倾斜}// 3D转换.div{transform:rotateX(120deg); //X轴旋转120°transform:rotateY(120deg); //y轴旋转120°}

过渡：从一种样式转换成另一种样式
过度属性：

• transition 设置四个过渡属性
• transition-property //过渡名称
• transition-duration //过渡效果花费时间
• transition-timing-function //过渡效果的时间曲线
• transition-delay //过渡效果开始时间

//过渡div{width:100px;height:100px;background-color:red;-webkit-transition:width 2s,height 2s,-webkit-transform 2s;}div:hover{width:200px;height:200px;transform:rotate(360deg);}

// 动画div{width:100px;height:100px;background-color:red;position:relative;animation:anim 5s;}@keyframes anim{0%{background-color:red;left:0px,top:0px}25%{background-color:red;left:100px,top:0px}50%{background-color:red;left:100px,top:100px}75%{background-color:red;left:0px,top:100px}100%{background-color:red;left:0px,top:0px}}@-webkit-keyframes anim{0%{background-color:red;left:0px,top:0px}25%{background-color:red;left:100px,top:0px}50%{background-color:red;left:100px,top:100px}75%{background-color:red;left:0px,top:100px}100%{background-color:red;left:0px,top:0px}}

多列：创建多列来对文本或区域进行布局
多列属性：column-count, column-gap,column-rule

div{-webkit-column-count:4;-webkit-column-gap:30px;-webkit-column-rule:5px outset red;}