首先,我们先看一看效果:
在线演示
四种最基本的转换:移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew),混合在一起做复杂变化
知识梳理:
使用这些操作变化就要使用css属性 transform:
translate(x,y);两个参数x,y ;可以是百分数(%),其他尺寸单位。一个参数没有效果。
rotate(15deg);旋转度数,牵扯到另一个属性transform-origin,改变元素变化的位置。
scale(2,2) 缩放倍数,width和height,当两个参数一样的时候,可以只写一个。
skew(15deg,15deg) 沿X轴倾斜15度,沿Y轴倾斜15度,
通过设置以上这些属性,可以改变元素的位置,变化。但是我们看不出来它的过程,还需要设置属性transition:
transition:
all //变化元素属性 一般都设置为 all ,不用考虑挨个属性设置
3s //3s完成, 以秒为单位
ease //变化效果 ease 渐渐变快 linear
1s ; //1秒之后执行动画
通过以上这些可以完成简单的元素变化了
再配合css3 动画可以做出更炫的效果:
使用@keyframes来定义动画,让元素的属性从某个状态变化到另一个状态:
@keyframes myanimate{
0%{
width:0;
}
50%{
width:50%;
}
100%{
width:100%;
}
}
还可以分的更细,加更多的属性进来,
下来使用定义的动画,
div{
animation:myanimate 3s;
}
设置3s完成这个动画。animation还有其他的属性设置,和transition有相似之处。还可以规定动画播放的次数,是否逆向播放,状态(比如鼠标hover时设置停止播放动画)
2D效果用到的其他知识点:(会不断更新)
- 媒体查询,做响应式网页,根据网页的大小做调整:
- @media screen 表示做屏幕的设置
- max/min-width 可视区域的最大宽度
- max/min-height 可视区域的最大高度
下面通过代码查看例子中的响应式设置:
@media screen and (max-width:600px){
figure{100%} //一行显示一张图片
}
@media screen and (min-width:601px) and(max-width:1000px){
figure{50%}; //一行展示两张图片
}
@media screen and(min-width:1001px){
figure{33.33%}; //显示三张图片
}
2. 给同一个标签的多个元素设置动画效果,比如依次进入。使用伪类:nth-of-type(),获取到同级元素。
.photo_1 figcaption p:nth-of-type(1){
transition-delay:0.05s; //第一个p元素0.05秒进入
}
.photo_1 figcaption p:nth-of-type(2){
transition-delay:0.15s; //第二个p秒0.15 秒进入
}
.photo_1 figcaption p:nth-of-type(3){
transition-delay:0.25s; //第三个p元素0.25秒进入
}
3. 正对浏览器内核不同,兼容性处理,在心标签元素前加入前缀即可
- -webkit- //chrome,safari,(搜狗和360浏览器都是双核的,测试时调整为极速模式)
- -o- //opera
- -ms-
当然,一些标签属性不断地出现,这些浏览器也都在不断更新,以适应这些新标签,而且大都支持。