css3基础点2

css3基础点2
transform：变形种类；的名称（对应的属性值），多个种类之间使⽤空格分隔。

⼀个（）中的属性值之间⽤逗号分隔。

transition 属性是⼀个简写属性，⽤于设置四个过渡属性：
transition-property 哪个属性实现过渡如：width
transition-duration 完成过渡效果需要多少秒/毫秒
transition-timing-function 速度效果的运动曲线，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（贝塞尔曲线）transition-delay 规定过渡开始前等待⼏秒
简写：transition：width 2s ease；
CSS3 动画
animation 基本参数与 transition 完全相同，第⼀个参数表⽰的是调⽤哪个动画 infinite 表⽰⽆限循环
.wrap {
height:100px;
margin:10px;
-webkit-animation:colorChange 10s linear 1.5s infinite;
}
@-webkit-keyframes colorChange {
0%{ background:#f00;}
10%{ background:#ff0;}
}
CSS3倒影 -webkit-box-reflect
1.⽅向 -webkit-box-reflect: below/above/left/right
2.距离
3.透明度
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
rgba(0,0,0,0.6) 100%)
旋转：-webkit-transform: rotate(120deg);
平移：-webkit-transform: translate(20px, 10px); -moz-transform: translateX(20px);
缩放： -webkit-transform: scale(1.1,0.5); X⽅向缩放1.1倍，Y⽅向缩放0.5倍
backface-visibility: visible | hidden; 定义当元素不⾯向屏幕时是否可见。

可⽤在扑克牌旋转上。

transform：变形种类；的名称（对应的属性值），多个种类之间使⽤空格分隔。

⼀个（）中的属性值之间⽤逗号分隔。

transition 属性是⼀个简写属性，⽤于设置四个过渡属性：
transition-property 哪个属性实现过渡如：width
transition-duration 完成过渡效果需要多少秒/毫秒
transition-timing-function 速度效果的运动曲线，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（贝塞尔曲线）transition-delay 规定过渡开始前等待⼏秒
简写：transition：width 2s ease；
CSS3 动画 animation
animation 基本参数与 transition 完全相同，第⼀个参数表⽰的是调⽤哪个动画 infinite 表⽰⽆限循环
.wrap {
height:100px;
margin:10px;
-webkit-animation:colorChange 10s linear 1.5s infinite;
}
@-webkit-keyframes colorChange {
0%{ background:#f00;}
10%{ background:#ff0;}
}
HTML5新增加标签：
优势：①语义性好少类名有利于SEO 代码少
②⽂档易读、搜索引擎能够更好的理解页⾯中的内容、作为开发者，能够更快更准确的搜索到信息。