如何使堆叠的卡片具有动画效果，以便一张接着一张 - 腾讯云开发者社区

文章/答案/技术大牛

发布

实战！半小时写一个脑力小游戏

把 front-faceand back-face的position属性都设置为 absolute，这样就可以从原始位置移除元素，并使它们堆叠在一起。这时页面模版看上去应该是这样： ?...再把 transition属性的值设置为 transform就可以生成动态效果了： ? 耶！现在我们得到了带有 3D 翻转效果的卡片，不过为什么卡片的另一面没有出现？...如果我们刷新页面并翻转一张卡片，它就消失了！ ? img 由于我们将两个图像都藏在了背面，所以另一面没有任何东西。所以接下来需要再把 .front-face翻转180度： ? 效果终于出来了！...匹配卡片完成翻转卡片的功能之后，接下来处理匹配的逻辑。当点击第一张卡片时，需要等待另一张被翻转。变量 hasFlippedCard和 flippedCard用来管理翻转状态。...点击同一个卡片仍然是玩家可以在同一张卡上点击两次的情况。如果匹配条件判断为 true，从该卡上删除事件侦听器。 ?

2.3K2 0

用 CodeBuddy 打造沉浸式首页，我给图书管理系统开了个好头

+ 加载更多 + 悬浮导航栏这些模块不是堆叠堆出来的，而是通过渐入动画、横向滚动、卡片阴影、拟态边框等样式细节组成的一个“有生命感”的首页。...我们用横滑卡片配合进度条设计，视觉上简洁、信息上完整。接着是“每日推荐”。每次进页面都会看到一张封面吸睛的图书卡片，卡片背景用了玻璃拟态叠加徽章，书名、作者、简介一目了然，还有“编辑推荐”小标。...；分类导航使用图标+名称+渐变色背景，兼具识别性和科技感；每一个组件都通过 animate-fade-up 类处理渐入动画；所有图书封面卡片都带有 box-shadow 和 hover 效果，提升可点感...这些效果在视觉上保证一致性，在交互上体现科技感，让首页和个人页看起来就是一个完整的系统，而不是拼接起来的“模块集”。再往深一层：性能与结构的兼顾首页功能多，动画多，交互频繁，如何保证性能不卡顿？...CodeBuddy 给了我一些很实用的建议：粒子动画使用 ref 延迟初始化，避免页面初始渲染卡顿；所有卡片滚动区域都用 scroll-view 包裹，避免不必要的 DOM 重绘；书籍列表使用 v-for

4550 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS 中关于 Overflow ，你需要了解的这些知识点！

card-content { border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; } 这可能需要很多工作，特别是如果卡片在移动设备上具有不同的设计...如下所示： .card { overflow: hidden; border-radius: 7px; } 动画当涉及动画时，overflow: hidden的好处是：在剪辑时可以悬停显示的隐藏元素上...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...水平滚动问题通常，我们会遇到水平滚动的问题，当原因未知时，滚动滚动会变得更加困难。在本节中，我将列出水平滚动的一些常见原因，以便大家以后在构建布局时可以想到到它们。...="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 该脚本的作用是使轮廓颜色随机化，而不是使所有轮廓都具有单一颜色，这将使其变得更容易。

8.1K2 0

【Flutter】堆叠式卡轮播

作为移动应用程序开发人员，我们有时需要制作滑动的，动画的背景图像轮播。但是，有时候，我们需要制作一张滑动卡片传送带，其中包含一些具有各种背景颜色，图像或渐变的信息。...在在本博客中，我们将探讨「Flutter中」的**堆叠式卡轮播。...pub地址：https://pub.dev/packages/stacked_card_carousel 用于创建带有堆叠卡片的垂直轮播的小部件。...下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用「stacked_card_carousel」软件包来使用堆叠式卡轮播。...它显示了垂直圆盘传送带滑动卡的列表，所有卡向上滑动并堆叠，称为堆叠式卡传送带。它会显示在您的设备上。堆叠式卡轮播的一些属性： **items：**这些属性表示卡小部件的列表。

5.3K3 0

仿【每天】首页动画

所以本来今天是打算总结一下这些日子学习Core Animation的心得的，但是突然发现更早之前一时兴起写的卡片动画还没完成，强迫症不能忍啊，果断花了一个下午大致搞定了，先上图： ?...结果突然就忙了起来，“山寨”计划胎死腹中，到今天也只来得及写了一个卡片动画。代码在这里,大家有兴趣的话可以看看。大致介绍一下思路吧，这个动画主要是分为卡片的飞上飞下和日期小圈圈中的数字滚动两部分。...再说到卡片动画，这个稍微复杂一点，主要是手势的处理，要分多种情况（第一张时，最后一张时，向上，向下，边界条件处理），由于我是用的 pan手势（拖动），而不是swip手势(快速滑动)，是没有direction...哦对了，卡片的3D效果是用等比缩放+阴影做的，整个小项目我都没有用Layer层的东西，动画都是用View层的动画接口写的，所以说也不要小看了View层的动画接口，《iOS Animations by Tutorials...由于时间仓促，代码还有许多可以优化的地方，有时间的话我会接着写。

1.3K2 0

滑动卡组件

在在本博客中，我们将探讨「Flutter中」的**滑动卡。**我们还将实现一个演示程序，并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。...pub地址：https://pub.dev/packages/sliding_card 滑动卡滑动卡是一种深度可调的Flutter包，可帮助您制作具有滑动动画效果的令人愉悦的卡。...该演示视频展示了如何在Flutter中创建滑动卡。它显示了如何在flutter应用程序中使用「slide_card」软件包来使用滑动卡。它显示了一张纸牌的弹跳动画，该动画分成两个打开的不同纸牌。...**hiddenCardHeight：**此属性用于使隐藏卡的高度小于或等于frontCard小部件的90％。「frontCardWidget」：此属性用于在正面显示的小部件。...将此保留为真实，以获得更现实的效果。 **slideAnimationForwardCurve：**此属性用于扩展时滑动动画的曲线。

3.5K6 0

Google数据可视化团队：数据可视化指南(中文版)

---- 原则数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。...取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。 ? 样式数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。...在移动端，将图例放在图表上方，以便在交互过程中保持可见。标签和图例在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。 ? 8....在合适的情况下，可以展示角色动画创造愉悦和鼓励。 ? 有特色的动画提升了空状态的效果。仪表板在称为仪表板的UI界面中，数据可视化通过一系列图表实现。...演示类仪表板演示类仪表板是为感兴趣的主题提供的展示视图。这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。

6.7K3 1

Android 手表应用开发设计规范【译】

典型的Android wear 应用会在时机合适，情境适当的情况下，在卡片流中加入一张卡片展示。卡片上可能会加入一个能够展示全屏应用的按钮，以便后续的简单交互，但是通常情况下也可以不加。　　...如何退出　　当用户做出选择后，应用应该自动退出二维选择卡界面。用户也可以向下滑动第一张卡片来退出，或者从左向右横滑处每个层级最左侧的卡片来退出。...文字应尽量简洁，长文会被应截断以便在一张卡片中显示。保持必要的谨慎　　智能穿戴设备具有天然的个人属性，但也并非是完全隐私的。...该模式下表盘可显示各种色彩及流畅的动画效果。　　　　　　　　　　　　　　　　　　省电模式 ? 省电模式可延长设备使用时间。你的设计应明确告知用户用户当前屏幕处于省电模式下。...一旦设定了预期达到的效果，你就需要思考如何获取相关数据以达成这一结果。表盘是条时间轴，合理为其添加数据 ? 你的表盘设计也许包含了一些非时间信息，比如天气，日历或健身数据等。

5K7 0

想做卡片式设计，花瓣不在了该上哪里找参考？

▲ UI 交互简单来说，卡片式设计就是将“卡片”置于一个图片或形状背景上，通常会给卡片添加阴影，使页面有立体效果。...卡片不仅仅是能够展示信息，同时卡片式设计还具有可以被覆盖、折叠、移动和滑动的特点。如此一来，更有利于扩展内容的视觉深度和可操作性了。...像是iPhone的通知中心，就是使用堆叠的卡片式设计，同类型的消息会被折叠起来，可以帮助用户迅速找到自己想要的东西，只需要点击就能打开，或者通过滑动删除。方便信息集成 ?...作为一个内容网站，Quora用卡片式设计解决了如何在有限的布局内平衡显示内容和用户体验。用卡片将信息组合成每个小模块，便于用户阅读。 Linkedin ?...点击目标越大，用户的操作越快，Linkedin展示内容的格式就是文本、图片、链接，当一张卡片都具备这些元素的时候，中心的图片就成为了整个卡片上最大的可点击区域。 Pinterest ?

1.6K2 0

UI设计中的基本动效，值得收藏一波

指向型动效的分类 1.滑动信息列表会跟随着用户的交互手势而动，然后卡片到相应的位置上，保持整齐感，它属于指向型动画，物体的滑动取决于用户是用那种手势滑动的。...它的作用就是通过指向型转场，有效帮助用户清理页面层级的排列情况。 ? 2.扩大页面中的卡片会从缩略图转化为全屏视图（一般这个卡片的中心点也会跟随移动到屏幕的中央）。...4.切换对象当前页面移动到后面，新的页面移动到前面，这样能够清楚解释页面之间是进行切换的，不会显得转换的太突兀和莫名其妙。 ? 5.展开推叠堆叠在一起的元素被展开。...10.滚动根据用户的手势进行滚动操作，非常使用与列表信息的查看。这个交互方式是我们用的最频繁的，仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。 ?...11.平移当一张图片在我们有限的屏幕里没有办法看完的时候，会使用这样的效果。除了放大效果，这样的平移还可以加上动效配合一些功能使用。 ?

2.6K1 0

【CSS】333- 使用CSS自定义属性做一个前端加载骨架

我们在打开APP或者网站的时候，经常可以看到这样的效果，在内容加载完成之前，会有一个骨架动画的出现，这种加载方式比传统的进度条方式要友好的多，但是很多朋友都不知道这种效果是如何做出来的，下面我们一步步的来看看吧...我们期望网络应用程序感觉像本机应用程序一样快速响应，无论其当前的网络覆盖范围如何。感知性能是衡量用户感觉速度的尺度。...此外，它没有响应，如果我们决定调整一些内容卡的样式，我们将不得不复制骨架图像的更改，以便它们再次匹配。一个更好的解决方案是只用CSS创建整个东西。没有额外的请求，最小的开销，甚至没有任何额外的标记。...我们可以用下面的方式来构建它，使以后更改设计变得更容易。通过CSS绘制骨架首先，我们需要绘制构成卡片骨架的基本形状。我们可以通过 background-image 属性添加不同的渐变来实现这一点。...添加动画为了使这更好，我们可以为我们的骨架设置动画，并使其看起来更像是一个加载指示器。

2.1K3 1

谷歌Material Design可视化数据设计规范指南

数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。...取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。样式数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。...在移动端，将图例放在图表上方，以便在交互过程中保持可见。标签和图例在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。 8....在合适的情况下，可以展示角色动画创造愉悦和鼓励。有特色的动画提升了空状态的效果。仪表板在称为仪表板的UI界面中，数据可视化通过一系列图表实现。...演示类仪表板演示类仪表板是为感兴趣的主题提供的展示视图。这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。

5.4K2 1

UED专栏 | 携程机票订后服务“航班助手”的三大设计秘籍

合并可以实现“合璧”，但处理好“双剑”之间的关系才是重中之重。由于「航班助手」主要是以众多卡片的形式提供服务，在合并后如何避免服务信息的堆叠，就成了本次改版的设计挑战点。...处理方案：我们将原航班动态内的所有信息聚合在一张卡片中（如何处理大量的信息聚合会在第三招中详细解说），运用深色背景来反衬航班卡片的优先层级，就如同蓝天下的白云一样。...解决手动关注问题：调整了架构后，我们对操作路径做了大量减法，充分利用X轴支持横向滑动这一交互特性，定义最左第一张卡片为手动关注的功能卡片。...2）【用户场景】的处理在呈现给用户最关注的动态信息后，如何留住用户关注到服务信息是本次改版的另一个设计挑战点。我们了解用户行程的特征，所以如果能与用户在情感上产生共鸣，将起到事半功倍的效果。...提升卡片的易阅读能力：我们通过数据可视化、图形化、适当添加动画及优秀的排版等手段让卡片变的更易读，从而降低用户的阅读费力度。 ?

1.1K3 0

3D视觉体验：利用HTML、CSS与JavaScript打造炫酷轮播图

正文内容一、认识CSS中的3D特性 CSS3引入了强大的3D变换功能，允许开发者对页面元素实现三维空间内的复杂布局和动画效果。...Backface-visibility 属性： backface-visibility: hidden：决定元素翻转至背面时是否可见，常见于制作卡片翻转等3D动画效果。...利用这些属性组合，开发者可以创造出如旋转立方体、卡片翻转动画、立体菜单等各种丰富的3D交互体验，显著提升网页设计的视觉冲击力和动态Web内容的趣味性。二、构建3D轮播图HTML结构接着设置了.carousel-item类的样式，包括图片大小、位置（居中）、过渡动画等，便于图片在3D空间平滑移动。...同时，.carousel-container类设置了绝对定位、背景颜色以及关键的3D属性，以便呈现3D立体旋转效果。

4.9K6 2

卡片式设计流行的秘密 — 看完这15个案例你就懂了！

而卡片作为容器，能够适应不同屏幕大小而不破坏信息的展示效果。智能化的生活中几乎随处可见卡片式设计以及基于卡片的交互模式。作为设计师，需要考虑使用者在不同设备上的使用和阅读习惯。...（3）利于信息分层和整合在卡片式设计中，一张卡片就是一个信息模块，用户即使快速浏览，也不会产生混乱。块状的卡片使得页面更加整齐美观，同一页面中卡片的不同大小，还区分了信息的重要等级。 ?...无论是首页推荐还是细分类别，模块化的展示使整个网站界面看起来整洁大方，十分具有条理性。配合上下、左右的滑动交互，给用户极强的操作感。 2. Quora ?...作为一个以信息展示为主的网站，Quora的设计首先考虑的是信息流的展示。如何在有限的版面内有条不紊的展示网页内容且兼顾用户体验及友好性？Quora机智地使用了卡片设计。...而Airbnb的设计在卡片的基础上，采用了无框设计，统一并且重复的信息元素使内容更具有规律性，也给人营造出比较整体的感觉。 Dribbble优秀卡片设计案例欣赏 9.

4K3 0

用 CodeBuddy 实现「IdeaSpark 每日灵感卡」：一场 UI 与灵感的极简之旅

某天，我突然冒出个念头——如果每天能弹出一句触发思考的金句，并且搭配简洁又有氛围感的界面，就像每天抽一张灵感卡，很酷。...接着，给出了分步骤的开发清单：搭建玻璃拟态背景与渐变卡片用 Canvas 实现粒子漂浮背景卡片翻转切换与切换动画收藏功能（基于本地存储）分享组件与悬浮按钮每一条都被 CodeBuddy...背景动效：灵感在空气中舞动为了让背景也充满趣味，CodeBuddy 把粒子动画抽离成一个单独的 ParticleBackground.vue。...主视图不但干净利落，动画代码也被集中管理，后续替换效果或调整参数都十分方便。交互细节：从收藏到分享的全链路体验在功能层面，收藏按钮和分享按钮分别承担了核心交互。...最终效果是：卡片翻转与阴影自然融合，背景粒子与玻璃界面相得益彰，收藏和分享功能也毫无瑕疵，代码模块清晰，一看就知道哪里改动或扩展。

2840 0

动效设计的空间感

1439277562407276.gif Tinder以其卡片式设计为范例。利用Z轴打造了无尽堆叠的卡片。将卡片扔到右面，代表你喜欢这个姑娘，或者丢到左边，代表无感。...相似的，如果你点击“x”按钮，那么自动会移动到左边，点“心”按钮，会移动到右面，按钮的动画效果与手势的动画效果互相援引。 ?...1439277591668411.gif Tinder的第二层级采用连续水平式的层级关系，这种感觉在iOS中让我们联想到经典的导航模式的动画效果，将内容串联起来。...1439278106895453.gif 这个动画采用了经典的Lightbox效果，但是除此之外。点击图片，图片会移动到前景。背景由于黑色层的关系，逐渐色彩变的熹微最后变黑。...1439278561722460.gif 这个太明显了，动画太过了，我觉得我不必再说什么了。 ? 1439278586718985.jpeg 如何避免你的设计层级、空间关系乱糟糟？

1.5K2 0

Unity 如何实现卡片循环滚动效果

简介功能需求如图所示，点击下一个按钮，所有卡片向右滚动，其中最后一张需要变更为最前面的一张，点击上一个按钮，所有卡片向左滚动，最前面的一张需要变更为最后一张，实现循环滚动效果。...定义卡片的摆放规则第一张卡片放在正中间，其余卡片分成两部分分别放在左右两侧，因此如果卡片数量为奇数，则左右两侧卡片数量一致，如果卡片数量为偶数，多出的一张需要放到左侧或者右侧，这里我们定义为放到右侧。...1.2f : 1f) * Vector3.one; 卡片尺寸大小至此已经完成了卡片的生成，但是如何在点击上一个、下一个按钮时动态调整所有卡片的坐标、层级和大小才是关键。...动态调整位置、层级和大小移动动画首先为每张卡片添加脚本，用于实现卡片的移动逻辑，使用插值的形式来实现动画过程，假设动画所需时长为0.5秒，使用变量float类型变量timer来计时，自增Time.deltaTime...，如果是，使其立即变为最左侧的卡片，不表现动画过程，目的是为了防止如下图所示，卡片从最右侧移动到最左侧的穿帮现象：穿帮现象在生成卡片时，为卡片物体添加该脚本，并添加到列表中进行缓存，同时，定义一个用于存储各编号对应的层级和坐标的数据结构

4K2 2

【CSS】骨架屏 Skeleton 效果

HTML 的部分打开 CodePen 编辑器，在 HTML 的部份加入一些结构，例如是一张卡片。...新增一个标签，class 名为 card；这张卡会有一张图片，加入一个，class 名为 image，在里面加入一张图片。...制作骨架屏回到 HTML 的部份，复制多一张卡片，不过清空里面的图片和文字，以及加入一个名为 loading 的 class，我们会将骨架屏的效果套用到这张卡片上。...动画的部分现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的，所以我会将背景设定为渐层颜色。...最后，再来一点微调，光束是斜的，如何可以做到三个灰色位置的光束看起来是同一条呢？

2.9K4 1

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

点击下面链接（第一次打开可能会有些慢）点击进入个人名片（手机版）图片展示前言在本篇博客中，我们将学习如何创建一个具有多个功能的个人名片网页。...实现一个背景图像轮播效果，每隔一段时间切换一张背景图。使用CSS 3D变换来创建一个具有多个面的卡片效果。...使用CSS 3D变换来创建一个具有多个面的卡片效果。...JavaScript 动画的实现 JavaScript是一种编程语言，可以用于为网页添加交互性和动画效果。在我们的项目中，JavaScript用于实现背景图像轮播和卡片翻转效果。....is_top { transform: rotateX(90deg) translateZ(100px); } 结语通过这个项目，我们学习了如何创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

1.4K1 0

点击加载更多

实战！半小时写一个脑力小游戏

用 CodeBuddy 打造沉浸式首页，我给图书管理系统开了个好头

CSS 中关于 Overflow ，你需要了解的这些知识点！

【Flutter】堆叠式卡轮播

仿【每天】首页动画

滑动卡组件

Google数据可视化团队：数据可视化指南(中文版)

Android 手表应用开发设计规范【译】

想做卡片式设计，花瓣不在了该上哪里找参考？

UI设计中的基本动效，值得收藏一波

【CSS】333- 使用CSS自定义属性做一个前端加载骨架

谷歌Material Design可视化数据设计规范指南

UED专栏 | 携程机票订后服务“航班助手”的三大设计秘籍

3D视觉体验：利用HTML、CSS与JavaScript打造炫酷轮播图

卡片式设计流行的秘密 — 看完这15个案例你就懂了！

用 CodeBuddy 实现「IdeaSpark 每日灵感卡」：一场 UI 与灵感的极简之旅

动效设计的空间感

Unity 如何实现卡片循环滚动效果

【CSS】骨架屏 Skeleton 效果

创建一个具有背景轮播和3D卡片翻转效果的个人名片网页

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐