移动Web学习01

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

一、平面转换

  • 作用：为元素添加动态效果，一般与过渡配合使用
  • 概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
  • 平面转换又叫 2D 转换

示例：

<!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 {
           margin: 100px 0;
           width: 100px;
           height: 100px;
           background-color: pink;
           transition: all 1s;
       }
       /* 鼠标悬停时的动态效果 */
       div:hover {
           transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

1、平移

  • 属性
    transform: translate(X轴移动距离, Y轴移动距离);
  • 取值：
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算结果）
    • 正负皆可
  • 技巧
    • translate() 只写一个值，表示沿着 X 轴移动
    • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

示例：

<!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 {
           width: 500px;
           height: 300px;
           margin: 100px auto;
           border: 1px solid #000;
       }
       .son {
           width: 200px;
           height: 100px;
           background-color: pink;
           transition: all 0.5s;
       }
       /* 鼠标移入到父级盒子，son 改变位置 */
       .father:hover .son {
           transform: translate(200px, 100px);
           /* 百分比：参照盒子自身尺寸计算结果 */
           transform: translate(50%, 100%);
           transform: translate(-50%, 100%);
           /* 只写一个数表示水平方向 */
           transform: translate(100px);
           transform: translateY(100px);
           transform: translateX(100px);
       }
   </style>
</head>
<body>
   <div class="father">
       <div class="son"></div>
   </div>
</body>
</html>

总结：

  1. 给盒子添加向左、向上的位移效果，属性取值为负。
  2. translate() 只写一个值表示 ==水平（X 轴）==方向移动。
  3. 百分比取值参照盒子自身尺寸计算最终结果。
平移实现居中效果

  • 方法一：

    position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-right: -100px;
width: 200px;
height: 100px;

  • 方法二：百分比参照盒子自身尺寸计算结果

    position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);

示例：

<!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 {
           position: absolute;
           left: 50%;
           top: 50%;
           /* 向左向上移动自身尺寸的一半 */
           transform: translate(-50%, -50%);
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

效果：
在这里插入图片描述

2、旋转

  • 属性：
    transform: rotate(旋转角度);
    • 角度单位是 deg
  • 技巧：
    • 取值正负皆可
    • 取值为正，顺时针旋转
    • 取值为负，逆时针旋转

示例：

<!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>
       img {
           width: 200px;
           transition: all 2s;
       }
       /* 鼠标悬停到图片上面，添加旋转效果 */
       img:hover {
           /* 正数：顺时针旋转；负数：逆时针旋转 */
           transform: rotate(360deg);
           transform: rotate(-360deg);
       }
   </style>
</head>
<body>
   <img src="./images/rotate.png" alt="">
</body>
</html>

3、改变转换原点

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

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

  • 取值：

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

4、多重转换

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

示例：

<!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: 800px;
           height: 200px;
           border: 1px solid #000;
       }
       img {
           width: 200px;
           transition: all 1s;
       }
       /* 鼠标移入box，图片边走边转 */
       .box:hover img {
           /* 先平移再旋转 */
           transform: translate(600px) rotate(360deg);
           /* 旋转会改变坐标轴向 */
           /* 多重转换：以第一种转换形态的坐标轴为准 */
           /* transform: rotate(360deg) translate(600px); */
               /* 有层叠性 */
           /* transform: translate(600px);
           transform: rotate(360deg); */
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/tyre.png" alt="">
   </div>
</body>
</html>

5、缩放

  • 属性：
    transfrom: scale(缩放倍数);
    transform: scale(X轴缩放倍数， Y轴缩放倍数);
  • 技巧：
    • 通常只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
    • 取值大于1表示放大，取值小于1表示缩小

示例：

<!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;
           height: 210px;
           margin: 100px auto;
           background-color: pink;
       }
       .box img {
           width: 100%;
           transition: all 0.5s;
       }
       .box:hover img {
           /* 修改宽高尺寸，从左上角开始缩放 */
           /* width: 500px;
           height: 400px; */
           /* 大于1，表示放大 */
           transform: scale(2);
           /* 小于1，表示缩小 */
           transform: scale(0.5);
           /* 等于1，不变 */
           transform: scale(1);
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/product.jpg" alt="">
   </div>
</body>
</html>

6、倾斜

  • 属性：
    transform: skew();
  • 取值：
    • 角度度数 deg

示例：

<!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 {
           margin: 100px auto;
           width: 100px;
           height: 200px;
           background-color: pink;
           transition: all 0.5s;
       }
       div:hover {
           transform: skew(30deg);
           transform: skew(-30deg);
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

效果：
在这里插入图片描述

7、渐变

  • 渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
  • 分类：
    • 线性渐变
    • 径向渐变
线性渐变

  • 属性：

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

  • 取值：

    • 渐变方向：可选
      • to 方位名词
      • 角度度数
    • 终点位置：可选
      • 百分比

示例：

<!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: 200px;
           height: 200px;
           background-color: green;
           background-image: linear-gradient(
               red,
               green
           );
           background-image: linear-gradient(
               to right,
               red,
               green
           );
           background-image: linear-gradient(
               45deg,
               red,
               green
           );
           background-image: linear-gradient(
               red 80%,
               green
           );
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

效果：
在这里插入图片描述

产品展示
background-images: linear-gradient(
	transparent,
	rgba(0, 0, 0, 0.6)
);

示例：

<!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 {
           position: relative;
           width: 300px;
           height: 212px;
       }
       .box img {
           width: 300px;
       }
       .box .title {
           position: absolute;
           left: 15px;
           bottom: 20px;
           z-index: 2;
           width: 260px;
           color: #fff;
           font-size: 20px;
           font-weight: 700;
       }
       .mask {
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-image: linear-gradient(
               transparent,
               rgba(0,0,0,0.5)
           );
           opacity: 0;
           transition: all 0.5s;
       }
       .box:hover .mask {
           opacity: 1;
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./images/product.jpeg" alt="">
       <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
       <div class="mask"></div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

径向渐变

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

  • 属性：

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

  • 取值：

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

示例：

<!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;
           border-radius: 50%;
           background-image: radial-gradient(
               50px at center center,
               red,
               pink
           );
           background-image: radial-gradient(
               50px 20px at center center,
               red,
               pink
           );
           background-image: radial-gradient(
               50px at 50px 30px,
               red,
               pink 50%
           );
       }
       button {
           width: 100px;
           height: 40px;
           background-color: green;
           border: 0;
           border-radius: 5px;
           color: #fff;
           background-image: radial-gradient(
               30px at 30px 20px,
               rgba(255, 255, 255, 0.2),
               transparent
           );
       }
   </style>
</head>
<body>
   <div></div>
   <button>按钮</buttom>
</body>
</html>

效果：
在这里插入图片描述

kuiini
关注
  • 21
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习书籍推荐
web前端新手学习之家
11-20 2269
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐。正在从事web前端工作的小伙伴们都知道，想要从事前端行业，要学习的内容太多了，当你不知道从哪里开始的时候，你就先从看书开始，边看书边码代码，这个是学习编程必须的过程，因为你看一百遍，还不如自己写一遍，写一遍，第一可以加印象，第二便于更好的理解。今天小编就为大家推荐几本适合web前端工程师学习前端技术的书籍，希望能够对小伙伴们有所...
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 2651
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
移动web学习总结
奋斗的小绿萝
08-07 2886
最近学习了些移动web开发的知识，总结一下： Hello,移动web： https://www.imooc.com/learn/494 一、基础知识 1. 关于Pixel px : CSS px，逻辑像素，浏览器使用的抽象单位 dp，pt： device independence pixel 物理像素：设备无关像素 dpr ： devicePixelRatio 设备像...
常用移动web开发框架
简单
05-01 7837
纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jQuery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架，项目中也有应用。国内也有公司，像BAT巨头也在探索和实现了适合自己的移动web...
web移动开发总结(一)
庚中
12-02 1万+
概述 移动web的概念和发展历史 移动web的开发方式和区别 响应式原理和媒体查询(重点) 响应式框架的介绍 bootstrap框架的基本使用 bootstrap全局CSS样式布局容器使用(重点) bootstrap全局CSS样式栅格系统使用(重点) bootstrap全局CSS样式响应式工具使用 微金所项目搭建和头部的结构 (重点) web前端 PC端的web ： 在PC端电脑访问的web...
web移动开发总结(四)
庚中
12-10 4346
总结 移动端的一些基本基础知识 移动京东的项目搭建 公共样式的定义 顶部通栏的布局 轮播图的布局 导航条的布局 秒杀商品布局 京东超市布局 原生移动web开发 响应式开发： 写一个页面同时适配多个终端 原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码 PC端一般使用固定宽高的布局 移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局） 目...
基于web的在线学习系统设计与实现 功能参考
杭州.黄老师
12-27 3669
web在线学习系统
移动web学习--淘宝 flexible.js
热门推荐
季诗筱的博客
04-22 1万+
最近在学习移动web，需要做一个移动端和PC端都兼容的弹出框表单。查阅了很多资料，最终选择了使用淘宝的flexible.js来实现各个终端的适配。 很好的博文：     1、从网易与淘宝的font-size思考前端设计稿与工作流     2、白色橡树：移动web资源整理     3、移动端web app自适应布局探索与总结     4、手机端页面自适应解决方案—rem布局     5、使
Web前端学习笔记（十）--- 移动边框式按钮
海到无边天作岸 山登绝顶我为峰
09-09 2271
效果图 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
Web笔记-移动前端开发笔记
IT1995的博客
02-16 4892
因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。 px(CSS pixels)：逻辑像素，浏览器使用的抽象单位； dp,pt(device independent pixels)：设备无关像素； dpr(devicePixelRatio)：设备像素放缩比； 计算公式：1px = (dpr)^2 * dp 下面先解释下dp，为设备像...
移动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前端与移动开发学习路径
08-30
web前端开发学习路径介绍
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 411
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 877
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 217
练习JS的实用案例
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 777
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
web移动应用开发怎么学
07-14
学习 Web 移动应用开发可以按照以下步骤进行： 1. 学习 HTML、CSS 和 JavaScript：这些是构建 Web 移动应用的基本技术。了解如何使用 HTML 创建页面结构，使用 CSS 进行样式设计，以及使用 JavaScript 实现交互和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值