移动Web学习02

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量275 收藏 6
点赞数 5
分类专栏： CSS 文章标签： 前端 学习 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuiini/article/details/136477711
版权

二、空间转换、动画

1、空间转换

  • 空间：是从坐标轴定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
  • 空间转换也叫 3D转换
  • 属性：transform
平移

  • 属性

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

  • 取值（正负均可）

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 200px;
           height: 200px;
           margin: 100px auto;
           background-color: pink;
           transition: all 0.5s;
       }
       .box:hover {
           /* 电脑是平面，默认无法观察 Z 轴平移的效果 */
           transform: translate3d(100px, 200px, 300px);
           /* 3d 小括号里面必须逗号隔开三个数 */
           /* transform: translate3d(100px, 200px); */
           /* transform: translateX(100px);
           transform: translateY(-100%);
           transform: translateZ(300px); */
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>
视距 perspective

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

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 视距属性必须直接添加给 直接父级 */
       .father {
           perspective: 1000px;
           /* perspective: 10000px;
           perspective: 100px; */
       }
       .son {
           width: 200px;
           height: 200px;
           margin: 100px auto;
           background-color: pink;
           transition: all 0.5s;
       }
       .son:hover {
           transform: translateZ(-300px);
           transform: translateZ(300px);
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son"></div>
   </div>
</body>
</html>
旋转
  • transform: rotateZ(值);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 300px;
           margin: 100px auto;
       }
       img {
           width: 300px;
           transition: all 2s;
       }
       .box img:hover {
           transform: rotateZ(360deg);
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/hero.jpeg" alt="">
   </div>
</body>
</html>
  • transform: rotateX(值);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 300px;
           margin: 100px auto;
       }
       img {
           width: 300px;
           transition: all 2s;
       }
       .box {
           /* 透视效果：近大远小、近实远虚 */
           perspective: 1000px;
       }
       .box img:hover {
           transform: rotateX(60deg);
           transform: rotateX(-60deg);
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/hero.jpeg" alt="">
   </div>
</body>
</html>
  • transform: rotateY(值);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 300px;
           margin: 100px auto;
       }
       img {
           width: 300px;
           transition: all 2s;
       }
       .box {
           /* 透视效果：近大远小、近实远虚 */
           perspective: 1000px;
       }
       .box img:hover {
           transform: rotateY(60deg);
           transform: rotateY(-60deg);
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/hero.jpeg" alt="">
   </div>
</body>
</html>
  • 左手法则 - 根据旋转方向确定取值正负
    左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
  • 拓展
    • rotate3d(x, y, z, 角度度数)：用来设置自定义旋转轴的位置及旋转的角度
    • x, y, z 取值为0-1之间的数字
立体呈现 - transform-style

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

属性名：transform-style

属性值：

  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间
  • 呈现立体图形的步骤
    1. 父元素添加transform-style: preserve-3d;
    2. 子级定位
    3. 调整子盒子的位置（位移或旋转）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .cube {
           position: relative;
           width: 200px;
           height: 200px;
           margin: 100px auto;
           /* background-color: pink; */
           transition: all 2s;
           transform-style: preserve-3d;
           /* transform: rotateY(89deg); */
       }
       .cube div {
           position: absolute;
           left: 0;
           top: 0;
           width: 200px;
           height: 200px;
       }
       .front {
           background-color: orange;
           transform: translateZ(100px);
       }
       .back {
           background-color: green;
           transform: translateZ(-100px);
       }
       .cube:hover {
           transform: rotateY(90deg);
       }
   </style>
</head>
<body>
   <div class="cube">
       <div class="front">前面</div>
       <div class="back">后面</div>
   </div>
</body>
</html>
缩放

  • 属性

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

2、动画 - animation

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           width: 100px;
           height: 100px;
           background-color: pink;
           animation: change 1s infinite alternate;
       }
       @keyframes change {
           0% {
               transform: translate(0);
           }
           100% {
               transform: translate(600px);
           }
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>
实现步骤

  1. 定义动画

    @keyframes 动画名称 {
    from {}
    to {}
}
@keyframes 动画名称 {
    0% {}
    10% {}
    ......
    100% {}
}

  2. 使用动画
    animation: 动画名称 动画花费时长;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 200px;
           height: 100px;
           background-color: pink;
           animation: change 1s;
       }
       /* 动画一：宽度从200变化到800 */
       /* @keyframes change {
           from {
               width: 200px;
           }
           to {
               width: 800px;
           }
       } */

       /* 动画二：从 200*100 变化到 300*300 变化到 800*500 */
           /* 百分比：表示的意思是动画时长的百分比 */
       @keyframes change {
           0% {
               width: 200px;
               height: 100px;
           }
           20% {
               width: 300px;
               height: 300px;
           }
           100% {
               width: 800px;
               height: 500px;
           }
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>
属性

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

提示：

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 200px;
           height: 100px;
           background-color: pink;
               /* linear：匀速 */
           animation: change 1s linear;
               /* steps：分布动画，工作中，配合精灵图实现精灵动画 */
           animation: change 1s steps(3);
               /* 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间 */
           animation: change 1s 2s;
               /* 重复次数：infinite：无限循环 */
           animation: change 1s 3;
           animation: change 1s infinite;
               /* alternate：反向 */
           animation: change 1s infinite alternate;
               /* 动画执行完毕时的状态：forwards：结束状态；backwards：开始状态 */
           animation: change 1s forwards;
           animation: change 1s backwards;
       }

       /* 宽度从 200 变化到 800 */
       @keyframes change {
           from {
               width: 200px;
           }
           to {
               width: 800px;
           }
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>
属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时的状态forwards：最后一帧
backwards：第一帧状态
animation-timing-function速度曲线steps(数字)：逐帧动画
animation-iteration-count重复次数infinite为无限循环
animation-direction动画执行方向alternate为反向
animation-play-state暂停动画paused为暂停，通常配合==:hover==使用

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           width: 200px;
           height: 100px;
           background-color: pink;
               /* 动画名称 */
           animation-name: change;
               /* 动画时长 */
           animation-duration: 1s;
               /* 播放次数 */
           animation-iteration-count: infinite;
       }
       .box:hover {
               /* 暂停动画 */
           animation-play-state: paused;
       }
       /* 宽度从 200 变化到 800 */
       @keyframes change {
           0% {
               width: 200px;
           }
           100% {
               width: 800px;
           }
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>
逐帧动画
属性作用取值
animation-timing-function速度曲线steps(数字)：逐帧动画

核心原理：

  1. steps() 逐帧动画
  2. CSS 精灵图

精灵动画制作步骤：

  1. 准备显示区域
    盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画
    移动背景图（移动距离 = 精灵图宽度）
  3. 使用动画
    steps(N)，N 与精灵小图个数相同

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           width: 140px;
           height: 140px;
           border: 1px solid #000;
           background-image: url(./images/bg.png);
           animation: run 1s steps(12) infinite;
       }
       @keyframes run {
           from {
               background-position: 0 0;
           }
           to {
               background-position: -1680px 0;
           }
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>
多组动画
animation:
	动画1,
	动画2,
	动画N
;
animation:
	run 1s steps(12) infinite,
	move 3s linear forwards
;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           width: 140px;
           height: 140px;
           background-image: url(./images/bg.png);
           animation: 
               run 1s steps(12) infinite,
               move 3s linear forwards
           ;
       }
       /* 当动画的开始状态样式跟盒子默认样式相同时，可以省略动画开始状态的代码 */
       @keyframes run {
           /* from {
               background-position: 0 0;
           } */
           to {
               background-position: -1680px 0;
           }
       }
       @keyframes move {
           /* 0% {
               transform: translate(0);
           } */
           100% {
               transform: translate(800px);
           }
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>
kuiini
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动Web手册
08-07
《移动Web手册（双色）》主要讲解了移动Web开发和传统PC网站开发的不同之处。..., 《移动Web手册（双色）》主要面向前端开发工程师，对移动Web开发感兴趣的手机App开发工程师以及测试工程师也可以参考学习。
java基于web的移动学习平台毕业设计程序
09-22
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计...
React移动web极致优化
02-25
学习React的好处就是，学了一遍之后，能够写web,node直出，以及native，能够适应各种纷繁复杂的业务。需要轻量快捷的，直接可以用Reactjs；需要提升首屏时间的，可以结合ReactServerRender；需要更好的性能的，可以...
广工移动web课程设计
01-09
【广工移动Web课程设计】是一项针对计算机科学与技术专业学生的实践性教学环节，旨在让学生深入理解并掌握移动Web开发的相关技术。在这个课程设计中，学生不仅需要编写代码实现功能，还需要提交详细的报告来阐述其...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 192
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 144
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 822
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 616
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 974
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 742
模糊搜索功能 每个网站都要用得到
Webkit简介以及工作流程
读心悦
07-10 300
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
Haproxy搭建Web群集
wkysdhr的博客
07-08 948
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 371
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 85
通过sm4对文件进行加解密，用户输入密码
Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向
weixin_43303603的博客
07-11 286
性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 128
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
前端如何让网页页面完美适配不同大小和分辨率屏幕
rolling_kitten的博客
07-09 448
安装postcss，项目根目录新建配置文件postcss.config.js，记得别用exclude排除node_modules，否则postcss无法将包里的px样式也一起转为vw；对于el-message组件，单独在项目的index.html文件的style里，设置 .el-message { font-size: 16px;推荐使用postcss插件，它会自动将项目所有的px单位统一转换为vw（包括npm安装的第三方组件），从而实现适配
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 196
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
js中scrollIntoView第一次不生效，第二次生效
风如也的博客
07-12 81
方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值