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%)偏移实现上滑隐藏导航栏 的相关文章

  • 《JavaScript设计模式》初次笔记——wsdchong

    JavaScript设计模式 初次笔记 前言 设计模式一直久仰大名 但是没有去花时间去了解 于是今天特意花时间去看 JavaScript设计模式 2013年6月出版 和w3cschool上的设计模式 然后做了一些笔记 以 JavaScrip
  • 前端常见的适配方法

    作为一个真正的前端攻城狮 我们经常会谈到web前端怎么做适配 然而平常经常做的事 一旦问起来突然好像脑子一片空白 只能想到rem flex 媒体查询那些 因此想记录一篇文章以此警醒自己 一 固定布局 pc端 静态布局 以像素作为页面的基本单
  • javascript 中函数调用方法:apply() 和 call()

    每个函数都包含两根非继承而来的方法 apply 和call 这两个方法的用途都是在特定的作用域中调用函数 实际上等于设置函数体内this对象的值 首先 apply 方法接收两个参数 一个是在其中运行函数的作用域 另一个是参数数组 其中第二个
  • 从0到1,小白的前端摸索之路,属于你的成功之道!

    0基础 一年自学经验 8个offer 包括头条 去哪儿 猫眼 斗鱼 趣店 趣头条等 总价值180W 朋友们 大家好 我是白小白 目前是一名电子科技大学信通学院的大四学生 回想起自己正式涉足前端的学习 已然过去一年又几 这一年里 有困惑 迷茫
  • 什么是原型、原型链?原型和原型链的作用(有图方便理解)

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

    在网上搜了一下 很多面试都会被问到移动端适配方法的问题 最近看了一些文章 这里总结一下 首先 谈一下目前为止出现的一些关于移动端适配的技术方案 1 通过媒体查询的方式即CSS3的meida queries 2 以天猫首页为代表的 flex
  • 【前端——vue】:过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由

    一 过滤器 1 过滤器Filters 只能在vue2中使用 p标签里面看到的是后面函数的返回值 message相当于作为参数传给后面 竖线代表要调用过滤器 过滤器函数必须定义到filters节点之下 过滤器的本质是函数 字符串charAt
  • uni-app使用uView

    uni app使用uView 三配置前提 先安装uview 1 使用HBuilder创建uni app项目 这步过后就可以使用npm安装第三方组件了 cmd进入当前根目录执行 npm init y 执行后项目中会生成package json
  • JS封装计算1~100之间所有整数的总和与平均值

    function getSum var sum 0 for i 0 i lt 100 i sum i console log 1 100所有数和为 sum console log 1 100所有数和的平均值为 sum 100 getSum
  • HTML入门

    web前端 前端开发也叫web前端开发 它指的是基于web的互联网产品的页面 也可叫做界面 开发及功能开发 1 认识HTML HTML是Hyper Text Markup Language 超文本标记语言 的缩写 是构成web页面的基本元素
  • 微信获取JS-SDK的一些注意事项

    历时两天多 取到了JS SDK 可以开始调用微信提供的网页功能接口 遇到了很多的问题 在这里记录并分享 首先是设置安全域名的问题 要注意添加完ip白名单后 注意JS接口安全域名的设置 这里设置不当会报错 invalid url domain
  • webpack- JavaScript 应用程序的静态模块打包器

    一 概念 本质上 webpack 是一个现代 JavaScript 应用程序的静态模块打包器 module bundler 当 webpack 处理应用程序时 它会递归地构建一个依赖关系图 dependency graph 其中包含应用程序
  • javaweb-react的入门遇到的问题一:state和props的初始化和设置修改

    引用仿照菜鸟教程的例子 需要网页有一个id为example333的div var HelloMessage React createClass getDefaultProps return password 123456 render fu
  • vue页面的定时刷新

    在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况 那么这个时候我们就要使用setInterval 了 那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢 这就需要我们了解vue的生命周期 首先贴一张从官
  • vue3+vite+element plus+el-table中如何放置本地图片

    遇到bug 解决方案 vue组件 js代码
  • Echarts 提示内容自定义 y轴显示中文

    提示信息 只需要重写tooltip中的formatter方法 然后按照函数进行数据处理 并返回要显示的数据即可 tooltip formatter function params var res params 0 name br 水质等级为
  • 简单HTML+css太极图

  • 【TypeScript】断言

    目录 概念 用法 实例 总结 概念 TypeScript类型断言是一个编译时语法 用于告诉编译器用户比编译器更加确定变量的类型 进而解除编译错误 类型断言有点类似于其他语言的类型转换 但它没有运行时的影响 只是在编译阶段起作用 所以 即使通
  • 使用React实现时间的天数,小时数,分钟数之间的自动转化

    由于公司项目需要使用React实现时间的天数 小时数 分钟数之间的自动转化 在遇了很多坑后终于解决了问题 需要实现的功能 当用户在输入小时数的时候 超过24小时就自动转化为相应的天数 当用户在输入分钟数的时候 超过60分钟以上就要自动转化成
  • 学习笔记——SVG.js中形状元素的创建及其相关方法

    CreateElement 1 创建svg元素 在svg js中 每个元素都是一个对象 可以通过构造它来创建 import Rect from svgdotjs svg js var rect new Rect size 100 100 a

随机推荐

  • 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