css三被拆分成如下的小模块,采用器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面

 

2D转换

 

应用transform:属性来为因素设置二D转换,包容浏览器加前缀 –webkit-  -moz-

 

行使rotate()方法,让要素旋转一定的角度,参数:角度

比如:transform:rotate(30deg); deg是角度的单位

 

选拔translate()方法,让要素位移,参数:x轴 ,y轴

例如:transform:translate(10px,10px);

 

选用scale()方法,改变成分的比例大小,参数:x轴比例,y轴比例

例如:transform:scale(2,2);

 

利用skew()方法,拉伸成分,参数:x轴角度,y轴角度

例如:transform:skew(20deg,20deg);

 

行使matrix()方法,多变换结合,参数:矩阵,小编看不懂

 

3D转换

 

应用rotateX()和rotateY()方法,对成分进行旋转,浏览器很多都不补助,参数:角度

 

 

紧接效果

 

选取transition:属性为因素设置过渡动画效果,包容浏览器加前缀 –webkit-
 -moz-,必须是体制在被涂改的时候才会立见功能,因而在:hover的时候修改成分的体裁,能够看看功能

动用transition:属性,参数:css样式 持续时间

例如:transition:width 2s;

 

参数中应用逗号分隔多项改成,transition:样式 时间,样式2 时刻2,。。。

 

动画

 

创建动画@keyframes规则,@keyframes 规则名称{}

剧情之中,使用百分比来划分动画的速度,变化样式

0%{  1些体裁  }

二5%{  1些体制  }

5/十{  1些样式  }

四分3{         壹些体裁         }

百分百{  1些体制  }

 

行使animation:属性设置动画规则,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,循环播放

例如: animation:bitch 2s ease 0s infinite;

 

@keyframes bitch{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
#test{
    width: 100px;
    height: 100px;
    background: red;
    animation:bitch 2s ease 0s infinite;
}

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图