【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局

2D&3D转换与动画

1.字体图标

2022年6月29日21:48:05

简介

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第1张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第2张图片

下载

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第3张图片
选择需要的图表添加到购物车=》添加至项目=》下载到本地。
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第4张图片

使用字体图标

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第5张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第6张图片

svg上传

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第7张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第8张图片

2.2D转换-位移

平面转换的概念

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第9张图片

位移transform:translate

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第10张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第11张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第12张图片

定位盒子居中

【使用translate快速实现绝对定位的元素居中效果】
之前的写法:
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第13张图片
使用平面转换的位移写法:
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第14张图片

案例-双开门

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第15张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第16张图片

3.2D转换-旋转+缩放

旋转transform:rotate

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第17张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第18张图片

转换原点transform-origin

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第19张图片

多重转换

多重转换技巧:transform:translate() rotate();
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第20张图片

缩放transform:scale

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第21张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第22张图片

案例-缩放

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第23张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第24张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第25张图片
【注意点-层叠性】
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第26张图片

4.渐变linear-gradient

2022年6月30日15:19:54
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第27张图片

案例-渐变

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第28张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第29张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第30张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第31张图片

综合案例

【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第32张图片
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第33张图片
.txt也可以相对于a进行定位
【二、移动web网页开发】2D&3D转换与动画、移动端布局、响应式布局_第34张图片

你可能感兴趣的:(每日学习总结—JS,前端,html,css)