首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在父元素后面向下滑动的CSS translateY动画

是一种通过CSS的transform属性实现的动画效果。通过设置translateY属性,可以将元素在垂直方向上进行平移。具体的实现步骤如下:

  1. 首先,需要给父元素添加一个相对定位的定位方式,以便子元素可以相对于父元素进行定位。可以使用position: relative;来实现。
  2. 接下来,给需要进行动画的子元素添加一个绝对定位的定位方式,以便可以通过top属性来控制元素的垂直位置。可以使用position: absolute;来实现。
  3. 然后,通过CSS的transition属性来设置动画的过渡效果。可以设置transition: transform 0.5s ease;来实现一个持续时间为0.5秒的平滑过渡效果。
  4. 最后,在需要触发动画的时候,通过添加一个类名或者使用JavaScript来改变子元素的transform属性,从而实现向下滑动的效果。可以使用transform: translateY(100%);来将元素向下平移100%的高度。

这样,当触发动画时,子元素会在垂直方向上向下滑动,并且具有平滑的过渡效果。

这种动画效果可以在一些需要展示隐藏内容或者切换页面时使用,例如下拉菜单、折叠面板、轮播图等。在实际应用中,可以根据具体的需求进行调整和扩展。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云CSS:https://cloud.tencent.com/product/css
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

动画进阶】有意思网格下落渐次加载效果

当然,我个人认为这个动画有点华而不实,主要体现在这个动画一次需要耗费较长时间,有点消磨人耐心。不过确实一个很好 CSS 动画教学案例。...整个动画核心在于元素按顺序(又带点随机效果)从高处下落渐次进行下落加载填充动画。...: 下落动画 接下来,我们来实现元素下落动画。...首先,我们撇开多元素按顺序又带点随机延迟下落,值聚焦于单个 item 下落动画,它其实是这么个动画效果: 整个动画核心步骤大致是: 默认是状态下,元素最终 flex 布局状态下,且是可见状态...动画开始时,元素将消失,然后从上方,一个缩小状态下,有一个小幅度向上运动 接着元素向下运动到目标位置(终止状态) 元素从缩小状态,放大为正常状态 并且,动画结束后,需要维持最后一帧,因此需要使用(

24010

提升用户体验前端动画

下面简单拆分一下动画细节: 页面载入,卡片向上滑入 增加 pan 手势,卡片跟随手指滑动 随着手指滑动,增加遮罩透明度与卡片阴影变化 增加向上和向下边界条件处理 动画与手势运用 这些动画利用...CSS 3 一些属性再加上手势操作即可完成,这里手势操作我选择了老牌 HammerJS。...这里要注意,pan 操作中是不需要原有的 transition 过渡,因为滑动操作时,希望让动画非常跟手,而 transition 是一个消耗时间过渡,而且多次触发 transition 也会导致性能问题...用户向下滑动松手时距离,如果大于某个值,让卡片滑出,关闭 poplayer,小于某个值,则回弹到原位。...ios 8 下部分 CSS 3 属性需要添加 -webkit- 前缀。参考flexbox布局兼容性。 覆盖 status bar。

90720
  • 仿抖音视频全屏播放&滑动切换

    动画实现主要有requestAnimationFrame/setTimeout等传统方法实现,也有css3新增transition/animation过渡效果和动画实现本实例中为了低端安卓机流畅性...,故采用css过渡transition进行实现,通过isMove判断进行动画类wrap- animation添加,动画类实现如下: .wrap-animation { transition: transform....6s; } 复制代码 是否切换视频判断 由用户滑动距离&滑动速度决定,满足其一即可,主要实现是通过translateY参数滑动开始和滑动进行中记录滑动距离,同时滑动中实现页面拖拽跟随效果,以及使用...startTime参数滑动开始时时间戳,滑动结束时候进行判断,如果需要进入下一个视频,则将通过isMove参数开启动画,然后通过修改translateY参数进行切换。...4 各类问题 实现时候各种问题,欢迎吐槽 4.1 视频全屏 据MDN介绍: 使用提供API,让一个元素与其子元素,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

    4.1K20

    练一练,亲自动手做一个专业级 Hero Header 动效

    从设计角度方面来说,好 Hero Header 都有以下要素:抢眼标题,头条Call-To-Action 按钮令人印象深刻背景图或视频嵌入式类型描述视频或动画介绍特色内容滚动效果品牌元素 -...header 定义 before 伪元素,添加背景元素:一个黑色渐变色和背景图,透明度默认为0不显示,同时需要设置z-index:-1,将背景色放置最底层,相关代码如下:header:before ...,指引用户往下滑动查看内容。....header-down-arrow  动画样式,调用关键帧  pulse  ,让其不断循环播放,让其最后播放。....(4rem);          transform: translateY(4rem);}最后HTML部分,header 内部末尾添加箭头<section class="header-down-arrow

    1.3K40

    动画消消乐|CSS】调皮逃跑小方块 077

    动画消消乐】 平时学习生活比较枯燥,无意之间对一些网页、应用程序过渡/加载动画产生了浓厚兴趣,想知道具体是如何实现?...便在空闲时候学习下如何使用css实现一些简单动画效果,文章仅供作为自己学习笔记,记录学习生活,争取理解动画原理,多多“消灭”动画! 效果展示 ? 来个特写 ? Demo代码 HTML <!...得到cube动画css代码 .cube { animation: loading .5s linear infinite; } @keyframes loading { 17% { border-bottom-right-radius...步骤6 为shadow添加动画 这个就相对比较简单了 只需要阴影x轴方向随着时间变大变小即可 .shadow { animation: shadow .5s linear infinite; } @...记得box元素设置overflow: hidden; 结语 文章仅作为学习笔记,记录从0到1一个过程 希望对您有所帮助,如有错误欢迎小伙伴指正~ 我是 海轰ଘ(੭ˊᵕˋ)੭ 如果您觉得写得可以的话

    44630

    手势魅力-设置一个触摸菜单

    (touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,处理移动端点击,拖动,滑动时,是不得要考虑用户触摸手势,判断手指在页面上到底是点击还是滑动,利用原生js...这有什么好处呢 浏览器将尝试匹配显示刷新,以允许流畅动画 非活动选项卡中动画将停止(CPU上花费更少) 它不会耗尽你电池寿命 拖动,点击和滑动:额外东西要考虑移动触摸手势 这些事件需要能够检测和区分拖拽...你想在菜单后面加一个遮罩,当你打开它时会变得越来越暗吗? 情况下,我只希望手势方向是水平,因为我希望滚动功能正常。我有限制,并且我希望它回到开始或结束。...是h5新增查找元素方法,返回匹配指定 CSS 选择器元素第一个子元素,侧边栏菜单元素 var appMenu = document.querySelector(".app-menu-container...DOM中实际位置,这时,需要考虑手指是水平滑动还是垂直,甚至有时候还得考虑手倾斜滑动,还要区分是一根手指滑动,还是多根手指滑动,侧边菜单栏动画实现,以及要注意阻止默认事件,重叠计算等等一些细节 看似简单效果

    1.8K40

    :before 和 :after多用途实践 — 特效篇(3)

    说明 上一篇,我们实现了,白光特效,这次,我们来实现几个有关按钮特效! 按钮动画特效 效果图 ? 代码 <!...transform: translateX(-50%) translateY(-50%); } /* 匹配鼠标悬停在元素上时,元素之后插入内容 */ .animBtn.btnA:hover:after...); 这样,后面改变他高度时候,能保证距离元素上下距离一样,同时还给它加上z-index: -1; 这样它会在最底部显示,不会遮挡住要显示文字,而元素背景为透明色,也保证了能正常显示生成元素...这次多说一句transition,它使得CSS属性值一段时间内平滑过渡 具体参考 http://www.runoob.com/cssref/css3-pr-transition.html...总结 简单理解这次效果就是,生成一个元素当背景,让这个背景,漂亮显示出来就行了,这是第三篇,讲用伪元素做特效了,而这些还远远只是比较简单而已,我始终认为,CSS没有想象那么简单,好玩东西,还有很多

    1.1K20

    CSS3卡片光照效果

    我们需要给::after添加一个斜着渐变来模拟光照效果,这里我们使用从左到右渐变,然后再给一个倾斜形变就可以模拟了。最好再给一个简单悬浮动画就完事了。...*/ position: relative; /*子溢出元素隐藏 这样hover子元素时候 不算hover元素*/ overflow: hidden; } .hover-light...进阶 上面光照效果已经完成,其实CSS3形变投影等功能组合起来可以实现更好效果,我们现在添加样式,给元素也添加一个动画效果: .hover-light{ /*......其他代码相上*/ /*添加动画效果 直接继承效果*/ transition: inherit; } .hover-light:hover { /*向上移动6个像素*/...*/ position: relative; /*子溢出元素隐藏 这样hover子元素时候 不算hover元素*/ overflow

    1.9K40

    前端学习(18)~css3属性学习(十一):动画详解

    过渡是CSS3中具有颠覆性一个特征,可以实现元素不同状态间平滑过渡(补间动画),经常用来制作动画效果。 补间动画:自动完成从起始状态到终止状态过渡。不用管中间状态。...2D 转换 转换是 CSS3 中具有颠覆性一个特征,可以实现元素位移、旋转、变形、缩放,甚至支持矩阵方式。 转换再配合过渡和动画,可以取代大量早期只能靠 Flash 才可以实现效果。...上方代码中,我们最好加个透视属性,方能看到3D效果;没有这个属性的话,图片旋转时候,像是压瘪了一样。 而且,透视是要加给图片元素 div,方能生效。我们在后面会讲解透视属性。...格式有两种写法: 作为一个属性,设置给元素,作用于所有3D转换元素 作为 transform 属性一个值,做用于元素自身。...,我们 CSS3 中定义动画时候,也是先定义,再调用: 定义动画: @keyframes 动画名{ from{ 初始状态 }

    2.1K30

    原生JS实现移动端滑动反弹

    部分 列表盒子上设定一个 overflow:hidden属性,使超出盒子部分列表暂时隐藏掉,后面会通过 js去实现滑动。...首次滑动 手指触摸到列表向下滑动时候,列表应该跟着向下滑动,当手指离开屏幕时候,列表应该停在滑动位置。这里就会用到上面准备阶段知识点了,不明白可以参考上面的概念。...再次滑动 上面的效果图,细心朋友可能已经发现了问题,第一次时候,得到了我们想要效果,但是第二次时候,我们继续向下移动了一段距离,但是 ul并没有接着第一次位置继续向下,而是瞬间跳了上去。...限制向下滑动最大区间 设定向下最大区间值比较简单,直接设定一个值,当上一次滑动距离加上本次滑动距离大于这个值时候,就不让它再继续往下滑了,让他直接等于这个设定值。...(' + centerY + 'px)';  } }) 设定向下反弹值 向下值其实跟之前求滑动区间差不多,我们参考下图,当列表向上滑动滑动到列表底部时候,只要此时再向上滑动,就让它向下反弹。

    10.4K20

    小程序-实现自定义动画弹框提示框

    ; } to { transform: translateY(0px); } } 通过 css3 中@keyframes以及变换transform,垂直方向上平移,实现动画 示例效果如下所示...以上是通过css3动画animation结合@keyframes动画帧实现,那么小程序当中,也可以通过官方动画API实现 小程序动画 API-实现动画 创建一个动画实例 animation,调用实例方法来描述动画...animationData}}">底部弹出内容 通知内容 主要是给想要添加动画元素添加了一个...isBottom: true, }); // 设置setTimeout来改变y轴偏移量,实现有感觉滑动,回到初始位置 setTimeout(() => { animation.translateY...API实现完成动画,代码要比 css3 要多一些,可以实现更加复杂动画效果 注意 如果是底部弹出框,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="

    1.7K30

    Vue自定义指令-渐入指令

    简言Vue.js是一个轻量级JavaScript框架,广泛用于构建用户界面。它提供了一套丰富指令,帮助开发者快速构建交互式Web应用程序。本文将介绍个人使用滑动指令,并解释它们用法和功能。...例如,可以使用v-bind指令绑定一个CSS样式对象,实现动态样式修改。...if (entry.isIntersecting) { // 获取元素对应动画实例并播放 const animation = animationMap.get(entry.target...通过指令钩子函数参数 el 获取到 DOM 元素 mounted(el) { // 2. 判断元素是否视口之下,如果不是则不执行动画 if (!...将元素动画实例关联起来 animationMap.set(el, animation); // 6. 元素进入视口时播放动画 ob.observe(el); }, // 7.

    18600

    CSS3】CSS3 2D 转换 - translate 平移 ( transform: translate 样式 | 百分比移动相对于元素自身尺寸 | 百分比移动实现绝对定位居中效果 )

    一、CSS3 2D 转换 - 平移 / 旋转 / 缩放 ---- CSS3 中 Transform 转换 , 可以实现 标签元素 位移 / 旋转 / 缩放 ; CSS3 转换 二维坐标系如下 :...该坐标系是 界面开发 常用坐标系样式 ; 二、CSS 2D 转换 - Translate 移动 ---- 在网页中将 标签元素 沿着 x 轴 和 y 轴 各自移动指定长度 , 就是 2D 转换中移动操作...: translate 中可以传入百分比值 , 百分比是相对于元素自身尺寸来说 ; /* 水平方向 向右移动 元素自身宽度 50% 距离 垂直方向 向下移动 元素自身高度 50% 距离...> 执行结果 : 2、脱标测试 ( 百分比平移 ) 两个标准流盒子放在一起 , 如果为前一个盒子设置 translate 移动 , 该盒子并不会脱标 , 而是继续占有现有位置 ; 后面的标准流盒子位置并不会发生改变...---- 之前使用 绝对定位 进行居中设置时 , 首先 , 走到容器一半位置 ; 然后 , 再往回走子元素一半距离 ; 此时就可以实现元素居中设置 ; 设置 第二步 时候 , 子元素需要往回走一半距离

    86330

    HTML与CSS进阶

    HTML与CSS进阶 本文主要介绍H5新增内容以及CSS3中新特性。H5方面主要介绍拓展了哪些内容,CSS3方面介绍动画及转换。 H5新增内容 「1....伪元素选择器」 伪元素选择器注意事项 before 和 after 必须有 content 属性 before 在内容前面,after 在内容后面 before 和 after 创建是一个元素,但是属于行内元素...设置元素旋转中心(transform-origin) transform-origin: x y; 注意 后面的参数 x 和 y 用空格隔开 x y 默认旋转中心点是元素中心(50% 50%...,100 % 是动画完成,这样规则就是动画序列 @keyframs中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式动画效果 动画是使元素从一个样式逐渐变化为另一个样式效果,可以改变任意多样式任意多次数...透视也称为视距,所谓视距就是人眼睛到屏幕距离 距离视觉点越近电脑平面成像越大,越远成像越小 透视单位是像素 知识要点 透视需要写在被视察元素盒子上面 注意下方图片 d:就是视距,视距就是指人眼睛到屏幕距离

    2.9K50

    requestAnimationFrame实现单张图片无缝持续滚动

    背景 很久以前,有写过一个使用 js 实现单张图片持续滚动图片 代码,但那一版实现会持续操作DOM,向DOM中插入元素,性能较差,最近发现 requestAnimationFrame 通过 动画方式实现图片滚动更加方便...效果如下 需求描述 需要单张图片在可视区域内无缝持续向上滚动或向左滚动,由于向下和向右属于反着坐标轴移动图片,和正常DOM元素插入展示顺序也相反,遂不考虑此种场景。 代码实现 <!...transformV = "<em>translateY</em>"; // 置为 0 边界值为图片高度...// }, 4000); }; 备注 对于向上滚动和向左滚动两种效果,css...transformV = 'translateY'; // 置为 0 边界值为图片高度

    3.5K20

    前端基础-CSS3和CSS2区别

    二、css3和css2区别 css3原有的基础上新增了很多css属性选择器,伪类选择器,伪对象选择器以及动画 H5=html5 + css3 +js 大前端:js 1.内减模式 可以将padding...3.新增伪类选择器 伪类选择器 作用 :root 可以理解为根 li:first-child 代表找出元素中第一个li子元素 li:last-child 代表找出元素中最后一个li子元素 li:nth-child...(n) 找出元素第n个li子元素 li:nth-child(even) 代表找出元素中奇数li子元素 li:nth-child(odd) 代表找出元素中偶数li子元素 li:empty 代表找出元素中...多学一招:如果有两个值,第一个代表宽度比例,第二个代表高度比例 5.过渡效果 是一个动画效果 语法:transition:动画css属性 过渡时间秒数 速度类型 延迟秒数 取值:第一个值,写css属性名称...,就是要发生改变css属性,第二个值是时间单位s秒,第三个值是发生改变曲线linear匀速,ease先慢后快再慢,第四个值可以定义动画在几秒后开始 <meta charset="utf

    1.4K20

    动画消消乐】HTML+CSS 自定义加载动画:怦然心跳 066

    注:产生上述条件前提是海轰事先将span设置为页面居中(上下左右都居中) 步骤3 使用span::before和span::after伪元素 先同时设置 其属性设置为 绝对定位(left:20px)...步骤5 为span::before和span::after添加动画 效果同span动画一样,只是动画开始延迟0.3s,与span动画形成前后关系即可 span::before, span::after...可以发现右边before和after向下移动了,而实际移动距离就span总长度20px一半(50%)距离:10px ?...通过实际效果展示可以发现:此时span::before和span::after中设置top为50%,基准是相对于span 比如span长100px,如果before为top:50%,那么就是向下移动...可以发现此时span和span::after、before中心处于同一轴线上 这是因为translateY(-50%)中50%是指移动相对于自身50% 此时before和after长为40px,那么自身长度

    33810

    CSS伪类:CSS3鼠标滑过按钮动画

    下面我们通过简单示例在学习一下css3动画css伪类。...解析: 1、利用伪类作为鼠标:hover事件后,按钮背景,这里用到了相对定位(relative)和绝对定位(absolute) 切记:使用绝对定位元素元素一定要用相对定位,否则元素会一直向上找相对定位元素...解析: 1、这里和示例一其实类似,不过这里是改变伪类宽度。 2、以此类推,我们可以改变伪类高度,就可以看到向下扩展动画了。...(-50%); 2、通过:hover改变宽度或者高度,即可形成上图动画效果 通过上面的效果,我们可以更进一步,请看下列代码 示例四 按钮八</button...1、伪类元素灵活运用 2、transition作用 3、:hover鼠标移入动画 4、元素如何水平垂直居中 小伙伴们,有问题可以评论区留言哦,欢迎大家点评。

    2.3K20
    领券