介绍//前缀//webkit - Safari和Chrome(苹果,谷歌)//-moz Firefox(火狐)//- ms - IE9(即浏览器)//- o -歌剧(世界之窗)//例如ie兼容://-ms-transform(转换)//-ms-transition(过渡)//@-ms-keyframes(关键帧)//-ms-animation(动画) //transfrom属性的方法使用
变换:规模(30、60);//缩放:X轴缩放30倍,Y轴缩放60倍,只有一个值时为XY缩放倍数
变换:斜(30度,60度);//倾斜:X轴倾斜30度,Y轴倾斜60度,只有一个值时为X轴倾斜度数
变换:翻译(30 px, 60 px);//移动:X轴平移30 px, Y轴平移60 px,只有一个值时为X轴平移距离
变换:旋转(30度);//旋转:顺时针旋转30度
变换:rotateX(30度);//3 d水平旋转:3 d X轴顺时针翻转30度
变换:rotateY(60度);//3 d垂直旋转:3 d Y轴顺时针翻转60度
变换:矩阵(1 0 0 1 0 0);//整体转换:(缩放X,倾斜X,倾斜Y,缩放Y,移动X,移动Y)//注意:6个参数全部为数值,不带单位//1、缩放X轴缩放倍数//2、倾斜X轴倾斜百分比(相对宽度)//3、倾斜Y Y轴倾斜百分比(相对高度)//4、缩放Y Y轴缩放倍数//5、移动X轴平移像素//6,移动Y Y轴平移像素 转换属性:变换;//属性名称
transition-duration: 2 s;//用时长度(默认为0)
transition-timing-function:线性;//过渡效果(曲线缓解(默认)/匀速线性)
transition-delay: 1;//何时开始(默认为0)
过渡:变换2 s线性1;//变换,用时2 s,匀速,1 s后开始 //webkit -等前缀在关键帧前面添加//从~
@keyframes cssName1 {
从{
背景:红色;
}
, {
背景:绿色;
}
}//0% ~ 100%
@keyframes cssName2 {
0% {
变换:翻译(0);
}
25% {
变换:翻译(-200 px);
}
50% {
变换:翻译(0);
}
75% {
变换:翻译(200 px);
}
100% {
变换:翻译(0);
}
} animation-name:名称;//动画名称
动画:2 s;//用时长度(默认为0)
animation-timing-function:线性;//过渡效果(曲线缓解(默认)/匀速线性)
animation-delay: 1;//何时开始(默认为0)
animation-iteration-count:无限;//播放次数(1(默认)/无限永远)
动画方向:备用;//顺逆播放(正常正向(默认)/替代反向)
animation-play-state:暂停;//动画状态(运行运动(默认)/暂停暂停)
动画:名字2 s线性1 s无限替代停了下来;//名称,用时2 s,匀速,1 s后开始,无限循环,反向,暂停 //ie9及以上支持
border - radius: 10 px;//边框圆角//ie9及以上支持
不必:10 px 10 px 5 px # 999;//边框阴影(X轴偏移像素,Y轴偏移像素,模糊像素大,小颜色)//ie11及以上支持
border-image: url (bg.jpg) 30 30轮;//边框背景(背景,X轴、Y轴,重复性) background-size: 40% - 100%;//背景图大小(像素或百分比缩放)
background-origin:内容框;//背景图定位区域(内容框,padding-box(默认),border-box)
background-clip:内容框;//背景绘制区域(内容框,padding-box(默认),border-box) //ie10及以上支持
文本阴影:3 px 2 px 1 px # f00;//X轴、Y轴模糊距离,颜色(文字阴影)//ie8及以上支持
自动换行:break-word;//对长单词进行拆分,并换行到下一行(英文换行) @font-face {
字体类型:myFirstFont;
粗细:大胆的;
src: url (& # 39; Sansation_Light.ttf& # 39;),
url (& # 39; Sansation_Light.eot& # 39;);//IE9 +
}
身体{
字体类型:myFirstFont;//定义字体的名称
} column-count: 3;//元素中的文本分隔的列数
纵队间隔:40像素;//元素中的文本列之间的间隔
column-rule: 3 px开始# f00;//元素中的文本列之间的宽度,样式和颜色
小编给大家分享一下css3核心知识点有哪些,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
<强> css3前缀(浏览器兼容)
根据了解,css3属性大部分支持的问世,部分支持ie9,少部分支持ie8
变换(转换)
<强> (ie9及以上支持,ie9需添加前缀- ms)
过渡(过渡)
<强> (ie10及以上支持)
@keyframes(关键帧)
<强> (ie10及以上支持)
动画(动画)
<强> (ie10及以上支持)
css3其他属性
<强> css3边框
<强> css3背景(ie9及以上支持)
<强> css3文本
<强> CSS3字体(ie9及以上支持)
<>强css3多列(ie9及以上支持)
