vocal!!拖了这么久我才来写,我好Dior。刚刚吃了四根冰淇淋我好Dior。。。
CSS
平面转换——transform
作用:为元素添加动态效果,一般与过渡配合使用
概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
平移——translate()
属性:transform: translate( X轴移动的距离, Y轴移动的距离)
取值:px、%(参照自身盒子计算结果) 正负均可
技巧:tanslate() 只写一个值,表示沿着X轴移动
单独设置X或Y轴移动距离:translateX() 或 translateY()
平移实现居中效果
- 方法一
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
- 方法二:百分比参照自身盒子尺寸计算结果
postion: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
旋转——rotate()
属性:transform: rotate(旋转角度)
旋转角度单位:deg 正顺逆负
改变转换原点:
正常情况下,转换原点是盒子中心点
属性:transform-origin: 水平原点 垂直原点位置
取值:方位名词(left, top, right, bottom, center)、px、%
多重转换
以第一种转换形态的坐标轴为准
技巧:先平移后旋转 (因为这样它的坐标轴才不会变,才可以达到轮胎那样滚着走的效果
属性:transform: translate() rotate() // 要写在一起,因为它是复合属性 具有层叠性
缩放——scale()
属性:transform: scale(缩放倍数)
transform(X轴缩放倍数, Y轴缩放倍数)
技巧:通常只为scale设置一个值,表X轴Y轴等比例缩放
取值大于1表放大,取值小于1表缩小
倾斜——skew()
属性:transform: skew(xxdeg) 正左右负
渐变———background-image
1. 线性渐变——linear-gradient
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
...
};
取值:
渐变方向:to 方位名词 角度度数
终点位置:%
2. 径向渐变——radial-gradient
作用:给按钮添加高光效果
属性:background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
);
取值:
半径可以是两条,则为椭圆
圆心位置取值:px、%、方位名词
空间转换(3D转换 ——transform
Z轴位置与视线方向相同
属性:transform
平移
transform: translate3d(x, y, z)
transform: translateX() transform: translateY() transform: translateZ()
取值:px、%(正负均可
视距 perspective
作用:制定了观察者与Z=0平面的距离,为元素添加透视效果
透视效果:近大远小 近实远虚
属性:perspective: 视距;
添加给父级,取值范围:800-1200
旋转
transform: rotateZ(值) 跟平面旋转效果一样
transform: rotateX(值) 正:往里走 负:电脑关上那样
transform: rotateY(值) 正:从左往右 负:从右往左走
左手法则——根据旋转方向确定取值正负
左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为正值方向
自定义旋转轴位置及旋转角度
rotate3d(x y z 角度度数)
x y z取值为0-1之间的数字
立体呈现——transform-style
作用: 设置元素的子元素是位于3D空间中还是平面中
属性名:transform-style
属性值:
flat: 子级处于子平面中
preserved-3d: 子级处于3D空间中
呈现立体图形——步骤
- 父元素添加transform-style: preserved-3d;
// 父级就会变成一个立方体,子级位于立方体空间 - 子级定位
// 子级是立方体的每个面,所以子级要基于父级去定位 子绝父相 - 调整盒子的位置(位移或旋转)|
// 子级一前一后,产生立体空间(translate)
// 可以用hover{ rotatey() } 和 .cube{ transition: }去体验一下
缩放
属性:transform: scale3d(x, y, z)
transform: scaleX(); transform: scaleY(); transform: scaleZ()
动画——animation
过渡:实现两个状态间的变化过程 (transition
动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停
实现步骤
1.定义动画
- 两个状态变化
@keyframes 动画名称{
form { 当前状态CSS} //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码
to { 当前状态CSS }
}
- 多个状态
@keyframe 动画名称 {
0% { } //如果动画开始状态样式跟盒子默认样式相同 可省略开始状态代码
10% { }
.....
100% { }
}
// 百分比的含义:这个状态占动画时长的百分比
2. 使用动画
animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
!! 注意 !! :
- 动画名称和动画时长必须写
- 取值不分先后顺序
- 如果有两个时间值,第一个表达动画时长 第二个表延迟时间
七个属性:
- animation-name: 动画名称
- animation-duration: 动画时长
- animation-delay: 延迟时长
- animation-fill-mode: 动画执行完毕时的状态
forwards: 最后一帧
backwards: 第一帧- animation-timing-function: 速度曲线
steps() 逐帧动画- animation-iteration-count: 重复次数
infinite 无限循环- animation-direction: 动画执行方向
alternation 反方向- animation-play-state: 暂停动画
pause为暂停 通常配合hover
无缝动画原理
复制开头图片到结尾位置(图片宽度 = 区域宽度)
走马灯案例
精灵动画
核心原理:1. steps() 逐帧动画 2. CSS精灵图
制作步骤:1. 准备显示区域:盒子尺寸与一张精灵小图尺寸相同
2. 定义动画:移动背景图 移动距离=精灵图宽度
3. 使用动画:step(N) N与精灵小图的个数相同
多组动画
animation:
动画1,
动画2,
...
动画N
;
JS
正则表达式
用于匹配字符串中字符的组合模式,在JS中,也是对象。通常用来查找、替换那些符合正则表达式的文本。
语法:
1.定于正则表达式语法
const 变量名 = /表达式/
其中/ / 是正则表达式字面量
2.判断是否有符合规则的字符串
regObj.test(被检测的字符串)
test()方法:用来查看正则表达式与指定的字符串是否匹配
3.检索(查找)符合规则的字符串
regObj.exec(被检测的字符串)
exec()方法:在一个指定的字符串中执行一个搜索匹配
元字符
普通字符:仅仅只能够描述它们本身 (abcdefg...xyz
元字符:具有特殊含义 ( [a-z]
分类:
- 边界符:表位置、开头和结尾 必须用什么开头,用什么结尾
- 量词:表重复次数
- 字符类:比如 \d 表 0-9
1.边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符