transform: translateY(-100%)偏移实现上滑隐藏导航栏

2023-11-16

transform:translateY(100%) 语法:

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。

语法:

transform : none ;    也就是:  transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

取值:

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素 ,他有几个属性值参数:rotate;translate;scale;skew;matrix。下面我们分别来介绍这几个属性值参数的具体使用方法:

二、移动translate

移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

transform: translateY(-100%)偏移实现上滑隐藏导航栏 的相关文章

  • 构造函数与普通函数的一些区别

    一 构造函数和普通函数的三个不同点 1 构造函数也是一个普通函数 创建方式与普通函数一样 构造函数习惯上首字母大写 2 构造函数和普通函数的主要区别在于 调用方式不一样 作用也不一样 构造函数用来新建实例对象 3 调用方式不一样 a 普通函
  • 微信小程序设置背景图铺满顶部

    由于微信小程序自带顶部导航栏 导致我们设置背景图时总是无法铺满顶部 其实想要铺满顶部只需要改变一个属性即可 将navigationStyle的默认属性修改为custom 在微信小程序需要设置背景图的文件下的 json文件中设置
  • Ant-Design-Pro小试:react开发步骤(mock数据)

    1 router config js path train name train icon profile routes profile path train list name list component Train List 2 me
  • javascript 中函数调用方法:apply() 和 call()

    每个函数都包含两根非继承而来的方法 apply 和call 这两个方法的用途都是在特定的作用域中调用函数 实际上等于设置函数体内this对象的值 首先 apply 方法接收两个参数 一个是在其中运行函数的作用域 另一个是参数数组 其中第二个
  • 什么是原型、原型链?原型和原型链的作用(有图方便理解)

    原型 JS声明构造函数 用来实例化对象的函数 时 会在内存中创建一个对应的对象 这个对象就是原函数的原型 构造函数默认有一个prototype属性 prototype的值指向函数的原型 同时原型中也有一个constructor属性 cons
  • 移动端前端适配方案(总结) -- 面试重点

    在网上搜了一下 很多面试都会被问到移动端适配方法的问题 最近看了一些文章 这里总结一下 首先 谈一下目前为止出现的一些关于移动端适配的技术方案 1 通过媒体查询的方式即CSS3的meida queries 2 以天猫首页为代表的 flex
  • webpack5打包原理及应用(插件篇)

    webpack5打包原理及应用 插件篇 概念 loader 通常用来完成非JavaScript模块的转化成webpack能处理的模块 plugin 能够完成更多定制化操作的插件 如果想要插件起作用 需要在webpack config js中
  • uni-app使用uView

    uni app使用uView 三配置前提 先安装uview 1 使用HBuilder创建uni app项目 这步过后就可以使用npm安装第三方组件了 cmd进入当前根目录执行 npm init y 执行后项目中会生成package json
  • React学习笔记之十四: React hooks初探

    React Hooks 本文参考主要博文 阮一峰老师的 React hooks 教程 How to fetch data with React Hooks useEffect 完整指南 React hooks 的官方文档 demo Reac
  • 自学——一个月入门前端④

    本文的内容有关css盒模型 盒模型 在css中 所有的元素都被一个个的 盒子 包围着 广泛的使用两种盒子 块级盒子和内联盒子 这两种盒子会在页面流和元素之间的关系 block 绝大部分情况下盒子会和父容器一样宽 每个盒子都会换行 width
  • 安装nrm报错

    internal validators js 124 throw new ERR INVALID ARG TYPE name string value TypeError ERR INVALID ARG TYPE The path argu
  • URL地址 问号传参解析

    一 什么是URL参数 URL 参数是追加到 URL 上的一个名称 值对 参数以问号 开始并采用 name value 的格式 如果存在多个 URL 参数 则参数之间用一个 符隔开 有时还会有 二 为什么需要解析url的参数 面试问过 三 如
  • (HTML5)第一章

    HTML5秘籍 第一部分适合浏览器升级时参考 参考网址 H5API https github com Modernizr Modernizr wiki HTML5 Cross browser Polyfills 书本案例 http www
  • vue:结合elementUI设计网站登录页

    这次主要是记录三个重点 1 组件间通信的方法 其一 2 脚手架搭建的vue工程的组件调用 3 elementUI 的轮播图与模态框的设计 先看效果图 简单的就做了这四个页面 总共四个组件实现这些效果 这个小网站需要的组件也挺多的 当然不止这
  • ElementUI的表单效验问题 (一个页面两个form(数据相似))

    两个form 注意 两个表单必须绑定不同的 key key为字符串 否则 vue看两个表单数据大致相同就会将其上面的复用 导致效验不生效 rules
  • Echarts 提示内容自定义 y轴显示中文

    提示信息 只需要重写tooltip中的formatter方法 然后按照函数进行数据处理 并返回要显示的数据即可 tooltip formatter function params var res params 0 name br 水质等级为
  • antd+umi 嵌套路由_layout.js及antd tabs menus共同使用,实现点击菜单打开一个tabs页面并跳转路由,需要keep-alive实现数据缓存

    把左侧菜单放一个容器component里面 把menu里面的相关API内容 activeKey openKeys 这个我没放 根据当前路径去对比数据找到当前展开的menu 当前的menu的url key name 因为tabs需要用到 都记
  • Vuex的五个核心属性

    Vuex的五个核心概念 本文参考自Vue文档 说的非常详细 建议看文档 Vuex是什么 VueX 是一个专门为 Vue js 应用设计的状态管理架构 统一管理和维护各个vue组件的可变化状态 你可以理解成 vue 组件里的某些 data V
  • 前端学习——JavaScript原生实现购物车案例

    一 购物车案例 1 1 案例介绍 今天我们来写另外一个购物车案例 说实话对于我来说这个是花了将近三个小时的时间然后才做出来的 里面可能还存在一些我没有发现的问题 但是能完成基本的功能 对于一些基本的需求都是可以完成的 下面照旧是案例实现的g
  • Vue学习(五)登陆页面之重置和发起登陆请求及弹窗提示

    Vue学习 五 登陆页面之重置和发起登陆请求及弹窗提示 表单重置 根据预验证结果决定是否发出登陆请求 编写代码 启动api服务器 弹窗提示 表单重置 直接调用element ui给我们写好的函数就可以了 获取当前表单的实例对象 通过这个实例

随机推荐

  • Linux中普通用户和ROOT用户对Java JDK的配置

    Linux中对对各种工具文件不需要想Windows中似的 还要先一步一步的安装 有的还需要配置环境变量 比如Windows对Java的安装过程 在Linux中 使用指令 tar zxvf 文件名 注意空格 解压完 tar gz 文件 或使用
  • Spring事务实现原理

    Spring事务的原理是基于AOP实现的 所以流程也可以理解为与AOP一样分为3步 解析切面 织入通知和运行时增强 1 解析切面 Srping事务的是通过 EnableTransactionManagement注解开启的 该注解往IoC容器
  • 【逆向】使用CE查找Android中变量的偏移

    0x00 准备工作下载Cheat Engine以及调试器服务端 https www cheatengine org index php 夜神模拟器 https www yeshen com 下载安装贪婪洞窟 梦境模式 http a 4399
  • 【华为OD机试】路灯照明问题 (C++ Python Java)2023 B卷

    时间限制 C C 1秒 其他语言 2秒 空间限制 C C 262144K 其他语言524288K 64bit IO Format lld 题目描述 在一条笔直的公路上安装了N个路灯 从位置0开始安装 路灯之间间距固定为100米 每个路灯都有
  • oracle修改块大小设置,oracle性能调整(1)

    1调整数据库服务器的性能Oracle数据库服务器是整个系统的核心 它的性能高低直接影响整个系统的性能 为了调整Oracle数据库服务器的性能 主要从以下几个方面考虑 1 1Oracle 调整操作系统以适合Oracle数据库服务器运行数据库服
  • 利用PicGo+Gitee配置图床

    引言 配置图床 方便我们的使用 比如 我们利用typora写的笔记 直接把发送给别人也可以正常使用 不再会有由于本地图片 而加载不出来图片的情况 此外 图片文件遗失亦可以正常加载出来 因为图片已上传 这里已 Typora Gitee Pic
  • java String(一)—— Java中的String类型

    一 需要理解的代码 import java lang reflect Array import java util ArrayList import java util Arrays import java util HashMap imp
  • DNS服务器正向/反向解析配置

    第四次作业 题目 配置DNS正反向解析 一 正向解析 1 装包 2 配置服务 3 配置服务器 4 测试 1 yum install bind y 2 vim etc named conf 监听53号端口 访问的是本机ip 129 168 2
  • c++命名空间

    命名空间 主要解决全局变量的冲突 内部不允许私有变量 所有变量都是公有的 namespace data int x 10 data x 为域作用符 直接使用等同于使用全局变量 不存在就是0 不包含匿名命名空间内变量 同一个文件引用stati
  • 相见恨晚的办公插件合集(二)

    之前有分享过一些办公的插件 如不坑盒子 打工人插件 易用宝等 下面就简单的介绍一下上面的几个神器后再补充一些其它办公神器吧 不坑盒子 word wps 这是一个非常好用的插件工具 专门应用在Word文档和wps 支持Office 2010以
  • 拓数派入选中国信通院 “铸基计划”「高质量数字化转型产品及服务全景图」

    7 月 27 日 由中国信息通信研究院 以下简称 中国信通院 主办的 2023 数字生态发展大会 暨中国信通院 铸基计划 年中会议在京召开 本次大会深度展示了中国信通院在数字化领域的工作成果 并正式发布了 高质量数字化转型产品及服务全景图
  • GUI基础知识

    GUI编程 1 简介 图形用户界面 Graphical User Interface 又称图形用户接口 是指采用图形方式显示的计算机操作用户界面 GUI的核心技术 AWT Swing 2 Awt 2 1 AWT简介 AWT Abstract
  • springboot报错Could not autowire. No beans of ‘RedisConnectionFactory‘ type found

    这个报错提示是因为springboot升级到2 6 9以后版本就会出现 报错界面 其实上面报错不影响程序使用 但是总是觉得别扭 提供3种解决方式 第一种方案 springboot版本降到2 6 9或以下 第二种方案 通过idea设置不提示该
  • Unity&Webform(2):自定义LifetimeManager和TypeConverter使Unity从HttpContext中取值注入WebForm页面...

    上一篇 Unity WebForm 1 自定义IHttpHandlerFactory使用Unity对ASP NET Webform页面进行依赖注入中让Unity和WebForm结合在一起 通过使用HttpHandlerFactory实现了对
  • 模式匹配算法

    下面分别介绍 朴素模式匹配算法 和 改进模式匹配算法 KMP 朴素模式匹配算法思想 从目标S中的第一个字符开始和模式T中的的第一个比较 用 i 和 j 分别指示S串和T串中正在比较字符的位置 若相等 则继续逐个比较后续字符 否则 从S 的第
  • 【PYTHON】conda/pip一些命令记录

    查看环境 conda info env conda env list 删除某环境 conda remove n
  • 数据结构:设计实现抽象数据类型“有理数”内容

    题目 设计实现抽象数据类型 有理数 内容 设计并上机实现抽象数据类型 有理数 有理数的基本操作包括 两个有理数的加 减 乘 除等 包括有理数的创建和输出 要求 有理数的类型 我们可以构造成一个结构体类型 这个结构体由两个整数构成 分别表示有
  • 深入理解设计原则之最少知识原则/迪米特法则(LOD)【软件架构设计】

    系列文章目录 高级C 并发线程编程 C 高性能优化编程系列 软件架构设计系列 深入理解设计模式系列 不怕别人瞧不起 就怕自己不争气 Are not afraid to look down upon he was afraid his dis
  • JavaWeb 【基础】 IDEA 创建javaweb项目,并使用servelet 开发简单接口

    目录 创建项目 配置web项目 创建servelet 添加servelet路径映射 方法一 使用 web xml 配置servelet映射 方法二 使用注解配置servelet映射 初学javaweb的时候 通常会遇到很多坑 下面系统的做一
  • transform: translateY(-100%)偏移实现上滑隐藏导航栏

    transform translateY 100 语法 Transform字面上就是变形 改变的意思 在CSS3中transform主要包括以下几种 旋转rotate 扭曲skew 缩放scale和移动translate以及矩阵变形matr