前端学习笔记 | CSS动画+移动web

简·AI

已于 2024-02-01 11:27:33 修改

阅读量867

点赞数 22

分类专栏：前端文章标签：前端 html css 笔记学习

于 2024-02-01 10:22:13 首次发布

本文链接：https://blog.csdn.net/m0_53522458/article/details/135856478

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、平面转换

为元素添加动态效果，一般与过渡配合使用。

1、设置transition给元素本身，表示过渡变换方式和时间

2、在元素hover设置transform（动态效果）

transform:
【移动】translate(x方向，y方向) 、translateX（x、translateY(y) 位移
【旋转】rotate(数字+deg）
【缩放】scele(数字) 大于1放大，小于1缩小
【倾斜】skew（数字+deg）

【案例】双开门、风车旋转

3、所有的转换都是沿着中心点，改变旋转中心，在元素本身设置属性transform-origin

transform-origin：（x，y）
也可设置center、right、bottom等方位词

【案例】时钟旋转

4、多重转换

多重转换以第一种转换形态的坐标轴为准:先平移再旋转

transform复合属性

transform：translaate(x,y) rotate(360deg)

【案例】车轮

【补充】5、背景图的缩放效果

背景图可以通过设置background-size来配合hover实现缩放，而不用transform的scale

二、渐变

分类：线性渐变和径向渐变

线性渐变

background-image:linear-gradiant(

to 方位名词

颜色1 终点位置（写成百分比，可选）

颜色2 终点位置（写成百分比，可选）

...)

径向渐变

background-image:linear-gradiant(

半径 at 圆心位置

颜色1 终点位置

颜色2 终点位置

)

三、空间转换

1、空间平移

transform：
translate3d（x,y,z）;
translateX（x）;
translateY（y）;
translateZ（z）;

2、视距-透视效果：近大远小、近远虚实

perspective:数字+px(建议取值800-1000) 只能给直接父级添加，配合hover使用——给值过大，变化太小；给值过小，直接贴脸上（眼花）
配合transform的rotateX(deg)和rotateZ使用，可以让旋转效果更立体

3、旋转

左手法则：左手握住旋转轴，拇指指向正的方向，四指方向为旋转正值方向。

4、立体呈现

（1）transform-style:

preserve-3d 设置立方体处在3D空间
flat（默认）平面

（2）子级定位

5、空间缩放

translate:

scale3d(数字)
scaleX(数字)
scaleY(数字)
scaleZ(数字)

四、动画

书写步骤：

1、定义动画

2、使用动画

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态

速度曲线:liner-匀速 step（数字）-配合精灵动画
延迟时间：如果出现两个时间，第一个时动画时长
重复次数：数字-几次 infinite-无限循环
动画方向：alternative 反向
执行完毕时状态：backwards-开始状态 forwards-结束状态

3、animation属性

animation-name 动画名称

animation-duration 动画时长

animation-delay 延迟时间

animation-fill-mode 动画执行完毕时状态

animation-timing-function 速度曲线

animation-iteration-count 重复次数

animation-direction 动画执行方向

animation-play-state 暂停动画

五、移动适配方案

宽度适配：宽度自适应
百分比布局
flex布局
等比适配：宽高等比缩放
rem
vm

一种写法：less

1、屏幕分辨率

（1）物理分辨率（2）逻辑分辨率

2、书写步骤

（1）添加视口标签

meta name="viewpoint" （简写：自动填充）

（2）二倍图

防止图片在高分辨率屏幕下模糊失真。现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿，二倍图设计稿尺寸：750px。

六、rem适配方案

1、给HTML标签添加字号

媒体查询

（1）自己写：@media(宽度){

选择器{

CSS属性

}

}

（2）引用移动适配的JS文件，放到body最后面

2、使用rem单位书写尺寸

3、目前rem布局方案中，将玩个分成10份，HTML标签的字号为视口宽度的1/10

eg.视口宽度为375px，则1rem=37.5px

七、less

vscode插件：EasyLess

1、less运算

（1）加减乘除均可运算

触发需要单独加括号

{

width:(65 / 37.5rem)

}

（2）如果表达式有多个单位，以第一个单位为主

2、less嵌套

快速生成后代选择器

&：hover中&表示当前选择器，不会生成后代

3、less变量

容器，存储数据——方便使用和修改

语法：

定义变量：@变量名：数据
使用变量：CSS属性：@变量名

4、less导入与导出

(1)导入：@import '路径';

(2)导出：//out

(3)禁止导出

//out:false