【2D转换:】
1】位移 translate(x,y) (百分比单位是相对于自身元素 类似定位,不会影响到其他元素的位置 对行内标签没有效果)
2】旋转 transform:rotate(30deg) (2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 正数为顺时针,负数为逆时针)
转换中心点 transform-origin:top left;
3】缩放 transform: scale(宽的倍数,高的倍数)
【动画:】 animation
盒子状态之间的切换,看上去盒子是在动,动画效果。
1)动画使用步骤
第1步,定义动画(动画序列,各个状态时--样式)
@keyframes move (开始状态0% —— 结束状态100% )
第2步,使用动画
(动画名称 animation-name: move; 持续时间 animation-duration: 2s;)
2)动画的属性(控制动画执行)
必须属性:
动画名称
动画执行时间
可选属性:
速度曲线
延迟时间
执行次数:无限播放
逆向播放:倒车
结束状态:一去不复返【注意:这个属性跟无限播放和逆向播放是冲突】
以上属性都可以简写:
不包含暂停动画(鼠标悬停在盒子上时hover,设置这个属性)
【1】模拟三角图标
第1步,使用伪元素添加1个正方形盒子
第2步,设置盒子的两个边框,并且定到指定位置
第3步,旋转45度
【2】旋转中心点案例
结构:大盒子里有一个小盒子,小盒子跟大盒子一样大。
第1步,小盒子已左下角为中心点,旋转180度
第2步,大盒子溢出隐藏
第3步,当鼠标放到大盒子上时,小盒子旋转0度
【3】图片放大案例
结构:盒子里面有一个图片。
第1步,鼠标放到图片上,图片放大1.2倍
第2步,盒子溢出隐藏
第3步,图片添加过渡
【4】热点城市案例
结构:
地图大盒子,大盒子设置地图背景图片。
城市盒子,通过定位放到指定的位置。
1个小圆点盒子(宽、高、背景色、圆角边框)
2-3波纹小盒子(通过定位摞在小圆点的上面,宽、高、圆角边框、盒子阴影)
动画:
波纹小盒子放大,每个盒子的动画都延迟执行。
【5】打字机案例
结构:
装文字的盒子默认宽度是0,通过动画变宽。
让文字强制一行显示,并且溢出盒子隐藏。
动画:
通过速度曲线:steps(),分为几个步骤(文字个数)去变宽。
【6】奔跑的熊大
结构:
装熊的盒子(一个熊的大小)
盒子有背景图(8个不同形态的熊图)
动画:
第1个动画熊跑起来:加给div盒子(笼子),使用动画改变背景图的位置(速度曲线为:steps步长)
第2个动画笼子移动:加给div盒子(笼子),移动的位置,还要一去不复返。 |
|