一、CSS3的2d转换1.属性： transform:
属性值： translateX{ X轴平移、translateY（y轴平移 ）、translete XY轴都进行平移
属性值： rotate(90edg) 旋转90° 正数 顺时针 。负数 逆时针
2. 2d转换中心点
transform-origin(x,y) . x y可以是像素单位也可以是方位名词 ，移动的参照点是盒子左上角
3. 2d转换之缩放
transform:scale(4) 宽高都放大4倍 scale(3，2) 宽放大 3倍，高放大2倍 。 scale (0.5,0.5) 宽高都变为原来的一般
二、CSS动画的制作
概念
动画序列
1. 0%是动画的开始，100%是动画的结束
2.用 @keyframs 来固定CSS的样式， 可以创建从当前的的样式变化为新的样式的动画效果
3.可以改变任意多的样式和次数
4用百分数.可以规定变化的时间 0-100% 等同于from 到to
动画的制作步骤
1.定义动画
2.调用动画
3动画属性
1.@keyframes 规定动画
2.animation 所有动画属性的简写，除了 animation-play-state
-name 规定@keyframes动画的名字
-duration 动画的变化时间
-timing-function 动画运动曲线 默认 ease(逐渐变慢）
-delay 规定动画何时开始
-iteration- count 动画播放次数 默认infinite (循环播放）
-direction 是否逆方向播放 normal/alternate 逆时针
play-statue 规定动画是否暂停 running/paused
fill-mode 规定动画结束后代的状态 保持 forwards 回到起始 backwards
动画的运动曲线
linear、 ease、 ease in 、ease out、ease-in-out
三、swiper制作轮播图
四、swiper的其他样式
今日遇到的问题
无
|
