前端开发_移动Web+动画

平面转换

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

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

平移

属性：transform: translate(X轴移动距离，Y轴移动距离)

取值：

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可

技巧：

  • translate() 只写一个值，表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

平移实现居中效果：

  1. position: absolute;
left: 50%;
top: 50%

margin-left: -100px;
margin-top: -50px;

width: 200px;
height: 100px;

  2. position: absolute;
left: 50%;
top: 50%

transform: translate(-50%,-50%);

旋转

属性：transform: rotate(旋转角度) 角度单位为：deg

技巧：

  • 取值正负均可
  • 取值为正，顺时针旋转
  • 取值为负，逆时针旋转

改变转换原点：

默认情况下，转换原点是盒子中心点

属性：transform-origin: 水平原点位置 垂直原点位置;

取值：

  • 方位名词（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比

多重转换

技巧：先平移再旋转：transform: translate() rotate();

多重转换原理：以第一种转换方式坐标轴为准转换形态

  • 旋转会改变网页元素的坐标轴向
  • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);

技巧：

  • 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
  • 取值大于1表示放大，取值小于1表示缩小

倾斜

属性：transform: skew();

取值：角度度数deg

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

分类：

  • 线性渐变
  • 径向渐变

线性渐变

属性：

background-image: linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值：

  • 渐变方向：可选

    • to 方位名词
    • 角度度数

  • 终点位置：可选

    • 百分比

径向渐变

作用：给按钮添加高光效果

属性：

background-image: radial-gradient(
	半径 at 圆心位置,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

取值：

  • 半径可以是2条，则为椭圆
  • 圆心位置取值：像素单位数值 / 百分比 / 方位名词

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

空间转换也叫 3D转换

属性：transform

在这里插入图片描述

平移

属性：

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值（正负均可）

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）

默认情况下，Z 轴平移没有效果

视距

指定了观察者与 Z=0 平面的距离，为元素添加透视效果

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

属性：(添加给父级，取值范围 800-1200) perspective: 视距;

在这里插入图片描述

旋转

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

左手法则：根据旋转方向确定取值正负

左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间

呈现立体图形步骤：

  1. 父元素添加transform-style: preserve-3d;
  2. 子级定位
  3. 调整子盒子的位置（位移或旋转）

空间内，转换元素都有自已独立的坐标轴，互不干扰

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

实现步骤

  1. 定义动画

    /*第一种：from-to*/
@keyframes 动画名称 {
from {}
to {}
}

/*第二种：百分比*/
@keyframes 动画名称 {
	0% {}
	10% {}
	......
	100% {}
}

  2. 使用动画

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

    动画名称和动画时长必须赋值

    取值不分先后顺序

    如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards：最后一帧状态
backwards：第一帧状态
animation-timing-function速度曲线steps(数字)：逐帧动画
linear：线性渐变
animation-iteration-count重复次数infinite为无限循环
animation-direction动画执行方向alternate为反方向
animation-play-state暂停动画paused为暂停，通常配合:hover使用

多组动画

animation:
	动画1,
	动画2,
	...
	动画N
;

移动适配

移动Web基础

在这里插入图片描述

  • 切换设备仿真

    pc端浏览器按F12后会出现控制台，有切换设备仿真选项，能够启用类似手机模拟器的形式

  • 尺寸:响应：这里能够选择可参考的手机型号进行调试

  • 分辨率：开发尺寸，可以理解为移动端的逻辑分辨率

  • 缩放：不影响布局，只是方便查看

屏幕分辨率

制作网页参考，也就是逻辑分辨率

不同移动端型号的分辨率不同，并且也分物理分辨率和逻辑分辨率

  • 物理分辨率：该型号屏幕的实际大小，由屏幕的横纵像素点数决定
  • 逻辑分辨率：可以理解为设计尺寸
  • 二者一般都呈比例关系，目前来说2:1，3:1比较常见

视口

手机屏幕尺寸不同，网页宽度均为100%

网页的宽度和逻辑分辨率尺寸相同

视口：显示HTML网页的区域，用来约束HTML尺寸

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 视口标签 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
</body>
</html>
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止图片在高分辨率屏幕下模糊失真

可以理解为，直接用逻辑分辨率的2倍来作为设计稿尺寸

适配方案

  • 宽度适配：宽度自适应
    • 百分比布局
    • Flex布局
  • 等比适配：宽高等比缩放
    • rem
    • vw

rem适配方案

rem单位，是相对单位

rem单位是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式

当某个条件成立, 执行对应的CSS样式

@media (媒体特性) {
    选择器 {
        CSS属性
    }
}

示例：

@media (width:320px) {
	html {
		background-color: green;
	}
}

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

rem – flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。

核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

<body>
	......
	<script src="./js/flexible.js"></script>
</body>
rem单位尺寸

  1. 确定基准根字号

    • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）

  2. rem单位的尺寸

    • rem单位的尺寸 = px单位数值 / 基准根字号

简单来说：

  1. 根据视口宽度为html配好根字号

    html{
    font-size: 16px;
}

  2. 其他设置就可以根据html配好的根字号，使用rem单位

    /*div的字号为32px*/
div{
    font-size: 2rem;
}

less

CSS不支持计算写法，因此px单位转换到rem单位过程比较麻烦

通过less能够实现

简介

Less是一个CSS预处理器, Less文件后缀是**.less**。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件

VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件

less语法

注释：和 java 的注释相同

运算：加减乘直接书写计算表达式，除法需要小括号或.

示例：

width: (100 / 4px);
height: 100 ./ 4px;

表达式存在多个单位以第一个单位为准

嵌套：快速生成后代选择器

.父级选择器 {
    //父级样式
    .子级选择器 {
        //子级样式
    }
}

示例：

.father {
    color: red;
    .son {
        width: 100px;
    }
}

变量：容器，存储数据，方便使用和修改

语法：

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

示例：

// 定义变量
@myColor: pink;
// 使用变量
.box {
	color: @myColor;
}
a {
	color: @myColor;
}

导入：导入less公共样式文件

语法：导入：@import "文件路径"

如果是less文件，可以省略后缀

导出

写法：在 less 文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

示例：

// out: ./index.css
// out: ./css/

禁止导出：// out: false

vw

适配方案：使用相对单位，相对视口尺寸的计算结果

  • vw：viewport width

    • 1vw = 1/100视口宽度

  • vh：viewport height

    • 1vh = 1/100视口高度
vw布局

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定 vw 尺寸 （1/100 视口宽度）

vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

vh布局

查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定 vh 尺寸 （1/100 视口高度）

vh单位的尺寸 = px 单位数值 / ( 1/100 视口高度 )

开发中vw和vh不能混用，如果混用可能会导致盒子变形

响应式网页

解决方案：

  1. 媒体查询
  2. Bootstrap

媒体查询

@media (媒体特性) {
    选择器 {
        CSS属性
    }
}

媒体特性：

max-width：最大宽度（即小于该宽度时代码生效）

min-width：最小宽度（即大于该宽度时代码生效）

完整写法：

@media 关键词 媒体类型 and (媒体特性) {CSS代码}

关键词 / 逻辑操作符：and、only、not

媒体类型是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

类型名称值描述
屏幕screen带屏幕的设备
打印预览print打印预览模式
阅读器speech屏幕阅读模式
不区分类型all默认值，包括以上三种类型

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称属性值
视口的宽和高width、height数值
视口最大宽或高max-width、max-height数值
视口最小宽或高min-width、min-height数值
屏幕方向orientationportrait：竖屏
landscape：横屏

外部CSS

<link rel="stylesheet" media="逻辑符 媒体类型 and（媒体特性)" href="xx.css">

Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果

使用步骤

  1. Bootstrap – 下载

    下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

  2. 引入 Bootstrap CSS 文件

    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

  3. 调用类名：container：响应式布局版心类

    <div class="container">测试</div>

栅格系统

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

在这里插入图片描述

常用布局类：

  • col-ClassInfix-每个盒子所占份数 ：列（例如：col-xxl-3）

  • row：行

在这里插入图片描述

全局样式

Button类：

  • btn：默认样式
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm

在这里插入图片描述

表格类：

  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……

在这里插入图片描述

组件：

  1. 引入样式表
  2. 引入 js 文件
  3. 复制结构，修改内容

字体图标：

  1. 下载

    导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

  2. 复制 fonts 文件夹到项目目录

  3. 网页引入 bootstrap-icons.css 文件

  4. 调用 CSS 类名（图标对应的类名）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/231782.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

研习代码 day52 | 单调栈问题——柱状图中最大的矩形

研习代码 day52 | 单调栈问题——柱状图中最大的矩形

一、柱状图中最大的矩形 1.1 题目 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;…
阅读更多...
获取类class对象的方式

获取类class对象的方式

一、什么是class对象 Class类位于java核心包lang包中&#xff0c;它是反射的源头。Class对象用于记录每个类的运行时数据结构&#xff0c;或者说是在内存中访问类的静态数据的接口&#xff0c;每个类都有一个唯一的Class对象。Class对象不能直接通过new来获取&#xff0c;因为…
阅读更多...
Bomb Lab环境配置及解题

Bomb Lab环境配置及解题

Bomb Lab环境配置及解题 前言&#xff1a; 自上次做Lab隔了不少时间&#xff0c;环境配置也有点忘了&#xff0c;上次用的是mac搭docker这次直接用windows虚拟机&#xff0c;很简单&#xff0c;打开虚拟机用命令安装一下gdb和wget&#xff0c;然后用wget把官网的实验材料下载…
阅读更多...
tomcat源码学习记录

tomcat源码学习记录

tomcat 学习记录 tomcat 编译ant 下载编译运行 源码Debug运行 Bootstrap运行Tomcat查看状态 pom.xml测试EmbeddedTomcat 参考书籍博客 tomcat 编译 下载 tomcat 10 源码&#xff0c;解压然后idea导入 包存放的默认位置如下&#xff1a;base.path${user.home}/tomcat-build-lib…
阅读更多...
【操作系统笔记】-文件系统

【操作系统笔记】-文件系统

引言 之前已经学习过数据在内存中是如何表示&#xff0c;如何存储&#xff0c;但是这些存储在PC断电后数据便消失。因此我们需要一个可以持久化存储并且容量远远大于内存的结构&#xff0c;这一篇我们将学习&#xff0c;文件是如何被组织和操作的&#xff0c;这是一个操作系统…
阅读更多...
VS2009和VS2022的错误列表可复制粘贴为表格

VS2009和VS2022的错误列表可复制粘贴为表格

在VS2019或VS2022中&#xff0c;可看到如下错误列表&#xff1a; 如果复制这两行错误信息&#xff1a; 然后把它粘贴到word文件&#xff0c;就可以看到以下表格&#xff1a; 严重性 代码 说明 项目 文件 行 禁止显示状态 错误(活动) E0020 未定义标识符 "dd"…
阅读更多...
爱智EdgerOS之深入解析AI图像引擎如何实现AI视觉开发

爱智EdgerOS之深入解析AI图像引擎如何实现AI视觉开发

一、前言 AI 视觉是为了让计算机利用摄像机来替代人眼对目标进行识别&#xff0c;跟踪并进一步完成一些更加复杂的图像处理。这一领域的学术研究已经存在了很长时间&#xff0c;但直到 20 世纪 70 年代后期&#xff0c;当计算机的性能提高到足以处理图片这样大规模的数据时&am…
阅读更多...
ModelScope-Agent精读

ModelScope-Agent精读

阅读更多...
有源滤波装置在水处理行业配电系统中的应用

有源滤波装置在水处理行业配电系统中的应用

摘要&#xff1a;在水处理行业供配电系统中&#xff0c;涉及曝气风机、提升泵、污泥脱水设备等负荷设备&#xff0c;导致异步电动机产生较多无功功率和大量的谐波&#xff0c;使系统功率因数下降&#xff0c;以及谐波对配电系统、负载产生较大的危害。就此&#xff0c;水处理行…
阅读更多...
53. Protocol buffer 的Go使用

53. Protocol buffer 的Go使用

文章目录 一、介绍二、安装三、protoc3语法1、 protoc3 与 protoc2区别2、proto3生成go代码包Message内嵌Message字段单一标量字段单一message字段可重复字段slicemap字段枚举 一、介绍 Protobuf是Google旗下的一款平台无关&#xff0c;语言无关&#xff0c;可扩展的序列化结构…
阅读更多...
time模块(python)

time模块(python)

一.sleep休眠 [rootrhel8 day04]# vim demo01_time.py import time def banzhuan():print("搬砖")time.sleep(3.5) #让程序休眠3.5秒print("结束")banzhuan()[rootrhel8 day04]# python3 demo01_time.py 搬砖 结束运行时&#xff0c;会发现程序中间暂停…
阅读更多...
征途漫漫:汽车MCU的国产替代往事

征途漫漫:汽车MCU的国产替代往事

01.西雁东飞&#xff0c;南下创业 1985年&#xff0c;山东大学物理系毕业的周生明加入878厂&#xff08;“北霸天”&#xff09;参与MOS电路研发&#xff0c;随后几年&#xff0c;大洋彼岸的英特尔相继推出CPU 386\486、奔腾系列等产品。在摩尔定律的凸显、进口和走私的剧烈冲…
阅读更多...
js/jQuery常见操作 之各种语法例子（包括jQuery中常见的与索引相关的选择器）

js/jQuery常见操作 之各种语法例子（包括jQuery中常见的与索引相关的选择器）

js/jQuery常见操作 之各种语法例子&#xff08;包括jQuery中常见的与索引相关的选择器&#xff09; 1. 操作table常见的1.1 动态给table添加title&#xff08;指定td&#xff09;1.1.1 给td动态添加title&#xff08;含&#xff1a;获取tr的第几个td&#xff09;1.1.2 动态加工…
阅读更多...
RocketMQ-RocketMQ高性能核心原理（流程图）

RocketMQ-RocketMQ高性能核心原理（流程图）

1.NamesrvStartup 2.BrokerStartup 3. DefualtMQProducer 4.DefaultMQPushConsumer
阅读更多...
Unity-Shader - 2DSprite描边效果

Unity-Shader - 2DSprite描边效果

实现一个简单的2D精灵图描边效果&#xff0c;效果如下 实现思路&#xff1a; 可以通过判断该像素周围是否有透明度为 0的值&#xff0c;如果有&#xff0c;则说明该像素位于边缘。 所以我们需要打开alpha blend&#xff0c;即&#xff1a; Blend SrcAlpha OneMinusSrcAlpha&am…
阅读更多...
Java 11 到 Java 21：无缝迁移的可视化指南

Java 11 到 Java 21：无缝迁移的可视化指南

迁移到 Java 21 的理由 在我们探索从 Java 11 迁移到 Java 21 的必要性的旅程中&#xff0c;我们深入研究了四个关键类别&#xff0c;并强调了这一转变的重要性。每个方面都至关重要&#xff0c;共同为采用最新版本的 Java 编程语言打造了一个引人注目的案例。 1. 安全性&#…
阅读更多...
【数据结构(九)】线索化二叉树（3）

【数据结构(九)】线索化二叉树（3）

文章目录 1. 前言——问题引出2. 线索二叉树的基本介绍3. 线索二叉树的应用案例3.1. 思路分析3.2. 代码实现 4. 遍历线索化二叉树4.1. 代码实现 1. 前言——问题引出 问题&#xff1a;     将数列 {1, 3, 6, 8, 10, 14 } 构建成一颗二叉树. &#xff08;n17个空指针域&…
阅读更多...
【数据挖掘】国科大苏桂平老师数据库新技术课程作业 —— 第三次作业

【数据挖掘】国科大苏桂平老师数据库新技术课程作业 —— 第三次作业

part 1 设计一个学籍管理小系统。系统包含以下信息&#xff1a; 学号、学生姓名、性别、出生日、学生所在系名、学生所在系号、课程名、课程号、课程类型&#xff08;必修、选修、任选&#xff09;、学分、任课教师姓名、教师编号、教师职称、教师所属系名、系号、学生所选课…
阅读更多...
前端：如何让background背景图片进行CSS自适应

前端：如何让background背景图片进行CSS自适应

在设置login背景时&#xff0c;找到了一张这样的图片&#xff1a; 但是设置成login背景时&#xff0c;如果没有做一些css适应设置&#xff0c;图片就变样了&#xff0c;变成了这样&#xff1a; 严重变形了&#xff0c;这就造成了一种理想与现实的差距。 若想解决这个自适应问题…
阅读更多...
西工大网络空间安全学院计算机网络实验五——ACL配置

西工大网络空间安全学院计算机网络实验五——ACL配置

实验五、ACL配置 一. 实验目的 1. 掌握ACL的基本配置方法 二. 实验内容 1. 基于如下图所示的拓扑图&#xff0c;对路由器进行正确的RIP协议配置&#xff1b; ​ 首先引入3台2811 IOS15型号的路由器、3台2950-T24型号的交换机、4台PC-PT型号的PC机、两台Server-PT型号的服务…
阅读更多...
最新文章

Copyright @ 2022~2023