前端开发_移动Web+动画

news2024/11/18 17:49:44

平面转换

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

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

平面转换又叫 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 类名（图标对应的类名）

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue2 cron表达式组件

vue2 cron表达式组件

vue2 cron表达式组件 1. 先上图 2. 代码目录 3. 直接上代码 &#xff08;组件代码太多&#xff0c;直接上压缩包&#xff0c;解压后直接用&#xff0c;压缩包再博客顶部&#xff09; 4. 使用注&#xff1a;示例代码中使用了element-ui // HomeView.vue<template><…
阅读更多...
Python如何实现性能自动化测试

Python如何实现性能自动化测试

一、思考 1.什么是性能自动化测试? 性能 系统负载能力超负荷运行下的稳定性系统瓶颈 自动化测试 使用程序代替手工提升测试效率 性能自动化 使用代码模拟大批量用户让用户并发请求多页面多用户并发请求采集参数&#xff0c;统计系统负载能力生成报告 2.Python中的性能…
阅读更多...
多任务学习（Multi-Task Learning）和迁移学习（Transfer Learning）的详细解释以及区别（系列1）

多任务学习（Multi-Task Learning）和迁移学习（Transfer Learning）的详细解释以及区别（系列1）

文章目录 前言一、多任务学习&#xff08;Multi-Task Learning&#xff09;是什么&#xff1f;二、多任务学习&#xff08;Multi-Task Learning&#xff09;对数据的要求三、迁移学习是什么&#xff1f;四&#xff0c;迁移学习对数据的要求五&#xff0c;多任务学习与迁移学习的…
阅读更多...
LeetCode Hot100 22.括号生成

LeetCode Hot100 22.括号生成

题目&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 方法&#xff1a;灵神 组合型回溯-剪枝-枚举填左括号还是右括号 代码&#xff1a; class Solution {private int n;private char[] pat…
阅读更多...
放弃原生SQL：Python中更优雅的数据库操作

放弃原生SQL：Python中更优雅的数据库操作

概要 在Python中&#xff0c;通过原生SQL语句进行数据库操作是一种传统的方式&#xff0c;但现代的Python开发中&#xff0c;使用ORM&#xff08;Object-Relational Mapping&#xff09;工具和数据库连接库可以更加高效和优雅地进行增删改查操作。本文将详细介绍Python中放弃原…
阅读更多...
Ubuntu 18.04使用Qemu和GDB搭建运行内核的环境

Ubuntu 18.04使用Qemu和GDB搭建运行内核的环境

安装busybox 参考博客&#xff1a; 使用GDBQEMU调试Linux内核环境搭建 一文教你如何使用GDBQemu调试Linux内核 ubuntu22.04搭建qemu环境测试内核 交叉编译busybox 编译busybox出现Library m is needed, can’t exclude it (yet)的解释 S3C2440 制作最新busybox文件系统 https:…
阅读更多...
vue,nvue,uniapp,到底是什么

vue,nvue,uniapp,到底是什么

vue,nvue,uniapp,到底是什么&#xff1f; 发展猜想&#xff1a; 开发移动端软件&#xff0c;一般是控件逻辑&#xff0c;可拖动控件android studio都给你设计好了。 开发web页面时&#xff0c;用vue&#xff0c;vue是前端框架。主要是终端设备通过浏览器进行访问&#xff08…
阅读更多...
第三节JavaScript 函数、作用域、事件、字符串、运算符、比较

第三节JavaScript 函数、作用域、事件、字符串、运算符、比较

一、JavaScript的作用域 1、变量在函数内声明&#xff0c;变量为局部变量&#xff0c;具有局部的作用域。 局部变量&#xff1a;只能在函数内部访问 示例&#xff1a; // 此处不能调用 carName 变量 function myFunction() { var carName "Volvo"; // 函数内可…
阅读更多...
Unirest-Java：Java发起GET、POST、PUT、DELETE、文件上传，文件下载工具类介绍

Unirest-Java：Java发起GET、POST、PUT、DELETE、文件上传，文件下载工具类介绍

一、简介 Unirest-Java是一个轻量级的HTTP客户端库&#xff0c;用于在Java应用程序中发送HTTP请求。 它提供了简单易用的API&#xff0c;可以方便地处理GET、POST、PUT、DELETE等HTTP方法。 Unirest-Java支持异步和同步请求&#xff0c;可以轻松地与JSON、XML等数据格式进行…
阅读更多...
MongoDB的条件操作符

MongoDB的条件操作符

本文主要介绍MongoDB的条件操作符。 目录 MongoDB条件操作符1.比较操作符2.逻辑操作符3.元素操作符4.数组操作符5.文本搜索操作符 MongoDB条件操作符 MongoDB的条件操作符主要分为比较操作符、逻辑操作符、元素操作符、数组操作符、文本搜索操作符等几种类型。 以下是这些操作…
阅读更多...
使用医学数据集MIMIC，常见的问题记录

使用医学数据集MIMIC，常见的问题记录

目录 MIMIC数据库安装及数据导入教程1.postgresql安装第一步&#xff1a;error running考虑到是不是不同的sql的冲突从报错信息出发重启之后可以安装了 2.打开navicate153.7z 不是内部或外部命令&#xff0c;也不是可运行的程序4.在postgreSQL中输入**\i xxx**命令后遇到提示pe…
阅读更多...
idea__SpringBoot微服务06——静态资源（新依赖），首页和图标定制

idea__SpringBoot微服务06——静态资源（新依赖），首页和图标定制

静态资源 一、静态资源二、首页和图标定制————————创作不易&#xff0c;如觉不错&#xff0c;随手点赞&#xff0c;关注&#xff0c;收藏(*&#xffe3;︶&#xffe3;)&#xff0c;谢谢~~ 新依赖&#xff1a;jquery的 <dependency><groupId>org.webjars&…
阅读更多...
阿里云SLS采集jvm日志

阿里云SLS采集jvm日志

一、背景 java应用部署在阿里云的k8s容器里&#xff0c;采集其日志的需求则是一个不可缺少的。而不同公司的jvm日志会存在很大的差异&#xff0c;所以本文仅以我的实际情况作一个示例&#xff0c;仅供有需要采集jvm日志的同学们一个参考。 我们打印的Jvm日志格式见下&#xf…
阅读更多...
基于JAVA+SpringBoot+Vue的前后端分离的医院信息智能化HIS系统

基于JAVA+SpringBoot+Vue的前后端分离的医院信息智能化HIS系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着科技的不断发展&a…
阅读更多...
Gson 自动生成适配器插件

Gson 自动生成适配器插件

在json解析方面 我们常见有下面几方面困扰 1. moshi code-gen能自动生成适配器,序列化效率比gson快,但是自定义程度不如gson,能java kotlin共存 且解决了默认值的问题 2.gson api 强大自由,但是 第一次gson的反射缓存比较慢,而且生成对象都是反射,除非主动注册com.google.gson…
阅读更多...
maven下载安装与配置

maven下载安装与配置

文章目录 1. Maven下载2. 配置settings.xml2.1 指定Maven的本地仓库2.2 配置阿里云提供的镜像仓库2.3 配置 Maven 工程的基础 JDK 版本 3. 配置环境变量3.1 检查 JAVA_HOME 配置是否正确3.2 配置 MAVEN_HOME3.3 配置PATH3.4 验证 1. Maven下载 【Maven官网地址】 【Maven下载…
阅读更多...
消息队列zookeeper集群+kafka

消息队列zookeeper集群+kafka

消息队列zookeeper集群kafka kafka 3.0之前依赖于zookpeeper zookeeper开源分布式架构&#xff0c;提供协调服务&#xff08;Apache项目&#xff09; 基于观察者模式设计的分布式服务管理架构 存储和管理数据。分布式节点的服务结束观察者的注册&#xff0c;一旦分布式节点…
阅读更多...
在idea中使用maven创建dynamic web project

在idea中使用maven创建dynamic web project

1、先创建一个empty project 2、添加一个module , 核心是选择maven archetype webapp, 这个是maven提供的创建web工程的模版。 3、添加完等自动安装好即可 4、目录可能不完整 右键src---->点击New---->点击Directory &#xff08;注意&#xff1a;这是笔者所缺失的结…
阅读更多...
汽车4S店中的“S”指的什么？柯桥生活英语学习

汽车4S店中的“S”指的什么？柯桥生活英语学习

很多人买车都会去4S店选购 因为比较有保障 服务又很到位 可你有没有想过 这里的“4S”是什么意思 其实&#xff0c;这几个单词大家都认识 今天我们就来聊一下 与“4S店”相关的英文表达 01 “4S店”的英语表达 其实&#xff0c;4S店的全称是&#xff1a;汽车销售服务4S店…
阅读更多...
20231207_最新已测_Centos7.4安装nginx1.24.0_安装详细步骤---Linux工作笔记066

20231207_最新已测_Centos7.4安装nginx1.24.0_安装详细步骤---Linux工作笔记066

以前安装的太模糊了,干脆重新写一个: 1.首先下载对应的nginx-1.24.0.tar.gz安装文件 2.然后: 去执行命令 安装依赖 yum install -y gcc yum install -y pcre pcre-devel yum install -y zlib zlib-devel yum install -y openssl openssl-devel 3.然后:去解压 tar -zxvf ngi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023