移动 Web 第一天

2023-09-18 20:34:31

目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。

文章目录

01-平面转换

简介

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

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

请添加图片描述

平面转换也叫 2D 转换，属性是 transform

平移

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

定位居中

  • 方法一：margin

在这里插入图片描述

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

在这里插入图片描述

案例-双开门

在这里插入图片描述

  • HTML 结构
<div class="father">
    <div class="left"></div>
    <div class="right"></div>
</div>
  • CSS 样式
* {
    margin: 0;
    padding: 0;
}

/* 1. 布局：父子结构，父级是大图，子级是左右小图 */
.father {
    display: flex;
    margin: 0 auto;
    width: 1366px;
    height: 600px;
    background-image: url(./images/bg.jpg);

    overflow: hidden;
}

.father .left,
.father .right {
    width: 50%;
    height: 600px;
    background-image: url(./images/fm.jpg);

    transition: all .5s;
}

.father .right {
    /* right 表示的取到精灵图右面的图片 */
    background-position: right 0;
}

/* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
    transform: translate(-100%);
}

.father:hover .right {
    transform: translateX(100%);
}

旋转

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

转换原点

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

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

取值：

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

案例-时钟

在这里插入图片描述

.hour {
  width: 6px;
  height: 50px;
  background-color: #333;
  margin-left: -3px;
  transform: rotate(15deg);
  transform-origin: center bottom;
}

.minute {
  width: 5px;
  height: 65px;
  background-color: #333;
  margin-left: -3px;
  transform: rotate(90deg);
  transform-origin: center bottom;
}

.second {
  width: 4px;
  height: 80px;
  background-color: red;
  margin-left: -2px;
  transform: rotate(240deg);
  transform-origin: center bottom;
}

多重转换

多重转换技巧：先平移再旋转

transform: translate() rotate();
  • 多重转换原理：以第一种转换方式坐标轴为准转换形态
    • 旋转会改变网页元素的坐标轴向
    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放

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

案例-播放特效

在这里插入图片描述

  • CSS 样式
/* 1. 摆放播放按钮：图片区域的中间 */
.box li {
  overflow: hidden;
}

.pic {
  position: relative;
}

.pic::after {
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -29px;
  margin-top: -29px; */
  /* transform: translate(-50%, -50%); */

  content: '';
  width: 58px;
  height: 58px;
  background-image: url(./images/play.png);
  transform: translate(-50%, -50%) scale(5);
  opacity: 0;

  transition: all .5s;
}
/* 2. hover效果：大按钮，看不见：透明是0 → 小按钮，看得见：透明度1 */
.box li:hover .pic::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

倾斜

transform: skew();

取值：角度度数 deg

02-渐变

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

分类：

  • 线性渐变
    在这里插入图片描述

  • 径向渐变

在这里插入图片描述

线性渐变

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

取值：

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

案例-产品展示

在这里插入图片描述

  • HTML 结构
<div class="box">
  <img src="./images/product.jpeg" alt="" />
  <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
  <div class="mask"></div>
</div>
  • CSS 样式
.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 .5s;
}

.box:hover .mask {
  opacity: 1;
}

径向渐变

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

取值：

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

03-综合案例

在这里插入图片描述

导航-频道

箭头旋转
.x-header-nav .nav-item:hover .icon-down {
  transform: rotate(-180deg);
}
频道列表
.channel-layer {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: -2;
  width: 1080px;
  height: 120px;
  padding: 10px;
  margin-left: -540px;
  color: #72727b;
  background-color: #f5f5f5;
  border: 1px solid #e4e4e4;
  border-top: none;
  transition: all 0.5s;
  transform: translateY(-120px);
}

/* TODO 2. 弹窗频道 */
.x-header-nav .nav-item:hover .channel-layer {
  transform: translateY(0);
}

渐变按钮

搜索按钮
.x-header-search form .btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f86442;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3),
    #f86442
  );
}
登录按钮
/* TODO 7. 渐变按钮 */
.card .card-info .login {
  padding: 3px 34px;
  color: #fff;
  background-color: #ff7251;
  border-radius: 30px;
  box-shadow: 0 4px 8px 0 rgb(252 88 50 / 50%);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2),
    #ff7251
  );
}
客户端按钮
/* TODO 8. 径向渐变 */
.download .dl .dl-btn {
  width: 68px;
  height: 34px;
  line-height: 34px;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  background-image: radial-gradient(
    50px at 10px 10px,
    rgba(255, 255, 255, 0.5),
    transparent
  );
}

轮播图

/* TODO 4. 摆放图片 */
.banner .banner-list .banner-item.left {
  z-index: 0;
  transform: translate(-160px) scale(0.8);
  transform-origin: left center;
}

.banner .banner-list .banner-item.right {
  z-index: 0;
  transform: translate(160px) scale(0.8);
  transform-origin: right center;
}

猜你喜欢

/* TODO 5. 播放按钮和遮罩 */
.album-item .album-item-box::after {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5) url(../assets/play.png) no-repeat center / 20px;
  opacity: 0;
  transition: all .5s;
}

.album-item .album-item-box:hover::after {
  opacity: 1;
  background-size: 50px;
}


/* TODO 6. 图片缩放 */
.album-item .album-item-box:hover img {
  transform: scale(1.1);
}
更多推荐

Qt5开发及实例V2.0-第十一章-Qt事件处理及实例

Qt5开发及实例V2.0-第十一章-Qt事件处理及实例第11章Qt5事件处理及实例11.1鼠标事件及实例11.2键盘事件及实例11.3事件过滤及实例本章相关例程源码下载1.Qt5开发及实例_CH1101.rar下载2.Qt5开发及实例_CH1102.rar下载3.Qt5开发及实例_CH1103.rar下载第11章Qt5

buuctf-[网鼎杯 2020 朱雀组]phpweb

1.打开网站，吓我一跳2.查看源代码，主要看到timezone，然后这个页面是五秒就会刷新一次一开始去搜了这个，但是没什么用3.使用bp抓包会发现有两个参数，应该是用func来执行p4.修改func和pfile_get_contents：把整个文件读入一个字符串中。该函数是用于把文件的内容读入到一个字符串中的首选方法。

排序算法（未完）

诸神缄默不语-个人CSDN博文目录打算做每个算法介绍详细的思路、算法流程（PPT）、代码实现的视频。准备慢慢做。文章目录0.排序算法的稳定性分析1.插入排序/直接插入排序1.1希尔排序2.简单选择排序3.堆排序4.冒泡排序5.快速排序6.归并排序7.桶排序/箱排序8.基数排序/分配式排序/桶子法1.最低位优先(Leas

自动化测试工具slelnium的初体验

1.slelnium介绍1.1一个Web的自动化测试工具，最初是为网站自动化测试而开发的。1.2可以直接运行在浏览器上，它支持所有主流的浏览器（包括PhantomJS这些无界面的浏览器），可以接收指令，让浏览器自动加载页面，获取需要的数据，甚至页面截屏。1.3跨平台：linux、windows、mac;简单点说:是一款

华为数通方向HCIP-DataCom H12-831题库(单选题：121-140）

第121题在华为交换机上配置RADIUS服务器模板时，下列选项中哪些参数为可选的配置参数?A、认证服务器地址和端口B、RADIUS自动探测用户C、计费服务器地址和端口D、Shared-key答案：B解析：在华为交换机上配置radius服务器模板时，需要配置共享秘钥，认证服务器地址和端口，计费服务器地址和端口。可选配置r

[Linux入门]---gdb调试

文章目录0.前言1.gdb调试课前需知gdb指令2.总结0.前言平时我们在Windows操作系统下写代码的时候经常会写出bug，此时必不可少地会使用我们VS编译器的调试工具，而我们在Linux操作系统使用gcc编译器时，出现了bug又应该怎么进行调试呢？接下来让我们一起学习一下Linux调试器—gdb吧！1.gdb调试

同步 -- 信号量

本篇文章基于Linux-6.5源码建议：搭配Linux源码观看更佳structsemaphore{raw_spinlock_tlock;//保护信号量的自旋锁unsignedintcount;//最大同时可访问临界区的进程数量structlist_headwait_list;//等待队列，wait_list指向队列末尾

ansible

DevOps:官网：https://docs.ansible.com自动化运维工具对比C/S架构:客户端/服务端Puppet:基于Ruby开发,采用C/S架构,扩展性强,基于SSL,远程命令执行相对较弱SaltStack:基于Python开发,采用C/S架构,YAML使得配置脚本更简单.需要配置客户端及服务器端；每台被

【无标题】

想自学网络安全（黑客技术）首先你得了解什么是网络安全！什么是黑客网络安全可以基于攻击和防御视角来分类，我们经常听到的“红队”、“渗透测试”等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面性，例如Web安全技术，既有Web渗透，也有Web

1.6python基础语法——输出

作用：程序输出内容给用户1）格式化符号格式符号转换%s字符串%d有符号的十进制整数%f浮点数%c字符%u无符号十进制整数%o八进制整数%x十六进制整数（小写ox）%X十六进制整数（大写OX）%e科学计数法（小写’e’）%E科学计数法（大写’E’）%g%f和%e的简写%G%f和%E的简写技巧%06d，表示输出的整数显示位

十、阶段实践练习

阶段实践练习1.阶段实践练习1.1.练习1~~~~象棋口诀1.2.练习2~~~~输出汇款单1.3.练习3~~~~输出个人信息1.4.练习4~~~~计算月收入1.5.练习5~~~~计算商和余数1.6.练习6~~~~判断成绩能否及格1.7.练习7~~~~话费充值1.8.练习8~~~~货车装西瓜———————————————

热文推荐
  1. 精益求精：Android应用体积优化的终极指南

    精益求精：Android应用体积优化的终极指南1.介绍在当今移动应用生态系统中，Android应用的体积优化是开发者需要高度重视的关键方面之一。一个庞大的应用体积不仅会对用户体验造成负面影响，还会导致以下问题：下载速度延迟：用户需要等待更长时间来下载和安装应用程序，这可能导致用户流失。占用存储空间：较大的应用占用用户设

  2. 华为开源自研AI框架昇思MindSpore应用案例：消噪的Diffusion扩散模型

    目录一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例二、案例实现构建Diffusion模型位置向量ResNet/ConvNeXT块Attention模块组归一化条件U-Net正向扩散数据准备与处理采样训练过程推理过程（从模型中采样）本文基于HuggingFace：TheAnnot

  3. Homebrew国内和国外如何自动安装（Mac & Linux）

    介绍Homebrew是一个适用于macOS和Linux操作系统的开源包管理器，它允许用户轻松安装、升级和管理各种软件包和工具。Homebrew的目标是简化软件包的安装和维护过程，使用户能够快速获取他们所需的工具和应用程序。安装1、官网推荐安装方式，如果在国内，要使用vpn才可以访问通在macOS上安装Homebrew：

  4. react-route的路由

    React-Router是一个基于React的强大路由库，它可以帮助我们在React应用中实现页面之间的跳转和路由管理。本文将详细介绍React-Router的路由功能、常用功能模块、路由传参和路由嵌套，并提供相关代码和解释。路由功能React-Router通过管理URL和组件的映射关系，可以帮助我们实现以下路由功能：

  5. 算法 缺失的第一个正整数-(哈希)

    牛客网:BM53题目:无重复元素数组中未出现的最小的正整数思路:(1)使用单独hash表记录每个元素出现的次数，从1开始递增查询出现次数直到次数为0停止返回(2)将原数组作为hash表使用，处理好负数与0，将绝对值在N范围内的每个元素的绝对值减1定位到数组相关的下标将值置反（因为每个元素可能已被其他元素置为负数，所以需

  6. 时序预测 | MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元时间序列预测

    时序预测|MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元时间序列预测目录时序预测|MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元时间序列预测预测效果基本介绍程序设计参考资料预测效果基本介绍MATLAB实现POA-CNN-GRU鹈鹕算法优化卷积门控循环单元时间序列预测（完整源码和数

  7. 可以查看输入字数的手机备忘录软件用哪个?

    在当下这个科技迅速发展的时代，我们常常需要依赖备忘录来记录重要的信息、灵感和待办事项。手机备忘录成为了我们随身携带的工具，但是你有没有遇到这样的情况：你写了很多内容，但不知道写了多少字？这个问题或许曾经困扰着你，但如今，有了敬业签，一切都变得方便了。敬业签不仅仅是一个备忘录应用，它是一款可以分类记录工作计划、学习笔记、

  8. Linux 线程同步、互斥锁、避免死锁、条件变量

    1.线程同步概述线程同步定义线程同步，指的是控制多线程间的相对执行顺序，从而在线程间正确、有序地共享数据，以下为线程同步常见使用场合。多线程执行的任务在顺序上存在依赖关系线程间共享数据只能同时被一个线程使用线程同步方法在实际项目中，经常使用的线程同步方法主要分为三种：互斥锁条件变量Posix信号量（包括有名信号量和无名

  9. Unity中关于多线程的一些事

    一.线程中不允许调用unity组件api解决方法：可以使用bool值变化并且在update中监测bool值变化来调用关于unity组件的API.二.打印并且将信息输出到list列表中多线程可能同时输出多条信息。输出字符串可以放入Queue队列中。队列可以被多线程插入。三.启用socket连接server在主线程中直接连