菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: CSS3-袁瑞-20221122 [打印本页]

作者: Yrrrrrrrrrr 时间: 2022-11-23 23:43
标题: CSS3-袁瑞-20221122
一、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的其他样式

今日遇到的问题
无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)