当前位置：网站首页>【二、移动web网页开发】2D＆3D转换与动画、移动端布局、响应式布局

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

2022-07-28 04:21:00 【小蜜蜂学爪哇】

2D&3D转换与动画

1.字体图标

2022年6月29日21:48:05

简介

在这里插入图片描述

下载

在这里插入图片描述
选择需要的图表添加到购物车=》添加至项目=》下载到本地。

使用字体图标

在这里插入图片描述

svg上传

在这里插入图片描述

2.2D转换-位移

平面转换的概念

在这里插入图片描述

位移transform：translate

在这里插入图片描述

定位盒子居中

【使用translate快速实现绝对定位的元素居中效果】
之前的写法：
在这里插入图片描述
使用平面转换的位移写法：

案例-双开门

在这里插入图片描述

3.2D转换-旋转+缩放

旋转transform：rotate

在这里插入图片描述

转换原点transform-origin

在这里插入图片描述

多重转换

多重转换技巧：transform：translate（） rotate（）；
在这里插入图片描述

缩放transform：scale

在这里插入图片描述

案例-缩放

在这里插入图片描述

【注意点-层叠性】

4.渐变linear-gradient

2022年6月30日15:19:54
在这里插入图片描述

案例-渐变

在这里插入图片描述

综合案例

在这里插入图片描述

.txt也可以相对于a进行定位。

5.3D转换-位移和透视

空间转换简介

在这里插入图片描述

空间位移translate3d

在这里插入图片描述

透视属性perspective，800-1200

在这里插入图片描述

6.3D转换-旋转+立体呈现

空间旋转transform：rotateX

在这里插入图片描述
transform：rotateX/rotateY/rotateZ

左手法则

在这里插入图片描述

立体呈现transform-style

在这里插入图片描述
使子元素处于真正的3d空间。

7.3D导航案例

在这里插入图片描述

首页和index英文重叠在一起：

橙色盒子旋转90度：

橙色盒子向Z轴移动（视线方向）：

绿色盒子向前移动：

立方体旋转：（用左手法则确定旋转的角度正负数：x轴，大拇指方向为右，4指方向为正数）
在这里插入图片描述
注释掉辅助代码：

8.空间转换-缩放

在这里插入图片描述
这种效果用的不多。

9.CSS3动画

简介

在这里插入图片描述

from-to

在这里插入图片描述

百分比

在这里插入图片描述

动画复合属性-延长时间、重复次数

在这里插入图片描述

动画方向、执行完毕时的状态

在这里插入图片描述

动画拆分写法

在这里插入图片描述

逐帧动画

在这里插入图片描述

多组动画

在这里插入图片描述

综合案例-走马灯

在这里插入图片描述

移动端布局

1.移动端基础知识

在这里插入图片描述

分辨率

在这里插入图片描述
【不管pc端还是移动端都是参考逻辑分辨率去书写代码的。】

视口

在这里插入图片描述【视口】：能够让网页的宽度等于逻辑分辨率的尺寸（设备的宽度）。

没有视口标签，网页的宽度为980px。

二倍图

750px宽的图。写网页以二倍图居多。
设计师给一个750px的图，写代码时还是要参照375px的图去写。以375px去测量尺寸。
在这里插入图片描述

百分比布局（流式布局）

在这里插入图片描述

2.Flex伸缩布局

简介

在这里插入图片描述

不会脱标。

Flex布局模型构成

在这里插入图片描述
【添加了display：flex 的 父级叫：弹性容器。里面的子级叫弹性盒子。】

主轴对齐方式：justify-content

【在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。】
在这里插入图片描述

space-between
space-evenly

在这里插入图片描述

space-around

在这里插入图片描述

侧轴对齐方式：align-items

在这里插入图片描述

垂直居中的效果
变为默认值。
将子级盒子的高度注释掉：

Stretch是拉伸，为默认值。（如果子级盒子有高度，就不会生效。测试的时候需要去掉子级盒子的高度。）
验证是否为默认值，注释掉，发现子级盒子还是会沿着侧轴铺满。

单独控制某个盒子侧轴对齐方式：align-self

在这里插入图片描述

弹性盒子尺寸特点

在这里插入图片描述

子级盒子没有给高，默认会拉伸：

在这里插入图片描述
由于第二个子级盒子添加了侧轴居中效果，它的高度为内容的高度。
如果宽度也没有，就会由内容撑开。

弹性伸缩比

【使用flex属性修改弹性盒子的伸缩比。】
在这里插入图片描述

修改主轴方向：flex-direction

在这里插入图片描述

主轴方向和对齐方式

【1.先确定主轴方向；2、再选择对应的属性实现主轴或侧轴的对齐方式】
在这里插入图片描述

弹性盒子换行：flex-wrap

在这里插入图片描述

调整行对齐方式：align-content

在这里插入图片描述没有space-evenly。其他的和justify-content基本相同（center、space-around、space-between）。

3.rem移动端适配

2022年7月1日19:27:27
在这里插入图片描述

基本使用

在这里插入图片描述【首先要保证HTML标签有字号】

媒体查询

在这里插入图片描述

【小括号里面表达的意思是：检测设备的宽。】

测试上面的媒体查询效果时将电脑的分辨率设置为100%

移动适配

在这里插入图片描述

布局流程

在这里插入图片描述

flexible移动适配

在这里插入图片描述

4.Less

在这里插入图片描述

简介

在这里插入图片描述

注释

在这里插入图片描述
单行注释只能存在于Less文件，只能将多行注释渲染到css文件中。

计算

在这里插入图片描述

嵌套

【快速生成后代选择器】
在这里插入图片描述

变量

在这里插入图片描述

导入

在这里插入图片描述

导出-插件配置

在这里插入图片描述

导出-单独路径

在这里插入图片描述

禁止导出

在这里插入图片描述

5.vw / vh

在这里插入图片描述

vw-移动适配

【目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果。】
在这里插入图片描述

vh-移动适配

在这里插入图片描述

响应式布局

1.媒体查询

max-min-width

在这里插入图片描述

书写顺序

在这里插入图片描述

完整写法(了解)

在这里插入图片描述
关键词：and、only、not

Link写法

在这里插入图片描述

隐藏

在这里插入图片描述

让.left和.main横着排列。
出现这种情况是因为：盒子为弹性盒子
解决：

表示除去左边.left，父级剩余的宽度为.main盒子的宽度。即保证.left盒子的宽度是300px。

2.Bootstrap

版权声明
本文为[小蜜蜂学爪哇]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_48687155/article/details/126025844

边栏推荐

猜你喜欢

随机推荐