在砖石博客存档页面的每一张卡片上制作动画 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

好有链接数字名片 | 我们做了一款支持中文口令分享的自我介绍小程序

多身份名片我们每个人或多或少都有多个身份，并且会随时切换它们：用飞书开会，企微回复客户，Linkedin 更新工作成果的职场打工人用 notion 撰写博客，知乎分享经验，在 behance 上发布作品的设计博主用微博晒狗...你可以为它们设置不同的头像与简介，组合出专属于这一面的人设信息：添加社交卡片，绑定你的平台账号（微信、微博、小红书、B 站等），让别人更快找到你。...『好有链接』就是这样一本属于你的自我使用说明书，每一页都写给不同的人看。2. 中文口令出现中文口令的原因是因为我们觉得在社交平台上分享自己的链接和二维码太麻烦了。每次都要绞尽脑汁和平台斗争。...于是，在『好有链接』中，每一张卡片都可以被赋予一个自定义的中文口令。他人只需在小程序中输入口令就能直达你想展示的内容。...为此，我们又给卡片增加了隐私功能，你可以设置卡片仅可以通过口令发现。那么此时，口令分享就成了一场寻宝游戏：将这张卡片的谜底，制作成下一张卡片的口令。

2122 2

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

在完成了图书管理系统未来感十足的个人页之后，我决定趁热打铁，把首页也整得有模有样。于是我又找来了老搭档 CodeBuddy，从零出发，一起打造这个视觉和交互双在线的首页界面。...我们用横滑卡片配合进度条设计，视觉上简洁、信息上完整。接着是“每日推荐”。每次进页面都会看到一张封面吸睛的图书卡片，卡片背景用了玻璃拟态叠加徽章，书名、作者、简介一目了然，还有“编辑推荐”小标。...这些效果在视觉上保证一致性，在交互上体现科技感，让首页和个人页看起来就是一个完整的系统，而不是拼接起来的“模块集”。再往深一层：性能与结构的兼顾首页功能多，动画多，交互频繁，如何保证性能不卡顿？...每日推荐、最新上架、阅读排行榜交互反馈：下拉刷新、上拉加载、点击提示、状态动画可拓展性：每一块数据都通过变量控制，后续接入接口即插即用写在最后：CodeBuddy 不只是“写页面”，更像共同产品人...这一次首页页面的开发，和之前做个人页一样，我真正体会到 CodeBuddy 并不只是一个“能生成代码的工具”，它更像是一个知道用户体验、懂视觉逻辑、熟悉现代前端生态的“共同产品人”。

4230 0

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

是的

没有找到

WordPress主题制作（二）：模板和模板文件

制作WordPress需要了解PHP，但是无论如何，最终呈现在用户面前的页面都是一张网页，网页之所以能够在浏览器中显示出来，是因为最终传送给浏览器的是HTML、CSS和JS等终端代码，最终由这些代码控制浏览器的显示结果...sidebar模板文件这个模板文件主要用于控制博客的页面列表，类别列表，存档列表，友情链接列表和其他一些列表。...footer模板文件像 header.php 模板文件一样，footer.php 通常不会因为页面的改变而改变，你可以在这里放置任何东西，通常是版权信息。...sidebar.php WordPress主题制作（七）：制作基础模板Index.php WordPress主题制作（八）：制作文章单页模板single.php 计划: WordPress主题制作（九）...：制作评论区模板comments.php 计划: WordPress主题制作（十）：制作单页（非文章）模板page.php 计划: WordPress主题制作（十一）：制作静态首页front-page.php

2.3K3 0

erdaoo 的 WP Theme 教程学习笔记

index.php 首先制作index.php，我们知道在一个网页中，代码主要分为二部分，一个是页头信息，一个是页面内容。...它包含四个部分，每一部分都可以叫做一个集成模块，其实一个主题就是由不同的模块构成，模块又是由不同的模块构成。 header WP 的顶部，显示博客的名字与描述，放置导航栏，搜索栏等等。...而每一篇日志又是有标题，有发布时间，有分属类别，有读者的评论，这些又全部需要用 div 标签来分隔开。看下面的代码： <?...页面导航当你的博客内容越来越多的时候，在 WP 的后台又设定了首页只显示10个日志，那么从第11个开始都无法在首页显示出来。这样在博客的最后一篇日志下面就会出现后一页或前一页的链接。...说明：在单篇文章的下面显示的应是上一篇与下一篇的链接，而不是上一页与下一页的链接。如何处理留言评论？

1.1K3 0

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

于是，我对 CodeBuddy 下了这样一个指令：「请帮我用 UniApp 打造一个叫 ‘IdeaSpark 每日灵感卡’ 的轻量级单页应用，让用户每天收到一条创意提示，界面走极简玻璃拟态风，核心是卡片翻转和氛围感...接着，给出了分步骤的开发清单：搭建玻璃拟态背景与渐变卡片用 Canvas 实现粒子漂浮背景卡片翻转切换与切换动画收藏功能（基于本地存储）分享组件与悬浮按钮每一条都被 CodeBuddy...背景动效：灵感在空气中舞动为了让背景也充满趣味，CodeBuddy 把粒子动画抽离成一个单独的 ParticleBackground.vue。...借助 Canvas，数十个小气泡缓缓上升、淡入淡出，每一条思路都在空气中漂浮。主视图不但干净利落，动画代码也被集中管理，后续替换效果或调整参数都十分方便。...回顾项目：一步步把创意落到实处整个开发过程中，CodeBuddy 不断前瞻性地提出方案，从最初的页面结构、卡片样式，到动效和本地存储，再到分享流程，每一步都井然有序。

2630 0

小程序-渐入渐出动画效果实现

需要在列表展示的时候加上动画效果。在此献上小程序动画效果的教程。 ” 前言动画效果需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏掉当天之前的卡片。设计视频效果如下图： ?...在看了微信开发文档后，发现微信小程序提供了Animation的一个动画对象，具体看了里面的参数后发现，是可以实现需求上的效果的。...②Animation.step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。...首先每个卡片的位置相对于自身往Y轴平移80像素，并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。....init{ opacity: 0; transform: translateY(-80px) } 3 处理数据循环处理每一条数据，通过调用封装的方法，来获得该卡片应该拥有的动画属性

3.5K3 0

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

典型的Android wear 应用会在时机合适，情境适当的情况下，在卡片流中加入一张卡片展示。卡片上可能会加入一个能够展示全屏应用的按钮，以便后续的简单交互，但是通常情况下也可以不加。　　...用户点击该按钮后，会在手机上打开相应的应用页面，同时会在手表上显示的一个已经在手机上打开的完成动画。卡片操作按钮 (如媒体控制按钮) ? 某些情况下，在卡片上直接放置动作按钮会比较适合....比如一张卡片上显示了预计到达时间信息，某个具体的地址和一个汽车的 icon,很明显点击汽车的 icon 可以发起导航。但是比如一张显示着好友头像和名字的卡片，用户就不是很明确点击按钮后会放生什么？...该控件在全局系统界面中被广泛使用，包括上滑提示卡片后出现的列表中。当然，每款应用也可以根据自身需要打破这些常规控件样式。更详细的内容请参考应用架构规范部分。...此时，为了不影响用户快速扫视，不要将所有信息都塞进一张卡片里，而应该在信息流主卡片右侧附加一页（或者几页），使用户可以滑动查看更多信息。参见在手机上打开部分。 ?

5K7 0

滑动卡组件

在在本博客中，我们将探讨「Flutter中」的**滑动卡。**我们还将实现一个演示程序，并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。...pub地址：https://pub.dev/packages/sliding_card 滑动卡滑动卡是一种深度可调的Flutter包，可帮助您制作具有滑动动画效果的令人愉悦的卡。...它显示了一张纸牌的弹跳动画，该动画分成两个打开的不同纸牌。它会显示在您的设备上。滑动卡的一些属性： **slideAnimationReverseCurve：**此属性用于滑动动画的曲线。...在小部件内，我们将添加列小部件并添加「InterviewCard（）「类。在此类中，我们将添加」onTapped」函数；如果控制器的isCardSeparated为true，则折叠卡片，否则展开卡片。...我们将在此卡上添加标题，图像，名称，姓氏，两个按钮和一个信息图标。当用户点击图标时，卡片被展开，再次点击然后折叠卡片。

3.5K6 0

二次元会让人脸识别失效吗？

每一部动画电影的背后，都凝结了数百人的心血与汗水。自第一部电脑3D动画《玩具总动员》的上映，迪士尼就开启了数字化动画创作的征程。...随着 CGI、AI 技术的发展，迪士尼动画电影的制作、存档等方式也发生了极大的变化。...历史动画角色的相关素材数据，会在续集、彩蛋、参考设计时被高频使用动画师在进行续集制作、或想参考某一角色时，需要在海量的内容档案库中，寻找特定角色、场景或物体。...在技术上为了做到这一点，他们扩展了 Torchvision 的 Faster-RCNN 实现，以允许在训练过程中加载负样本而无需注释。...每一帧只发送给 GPU 一次，然后将所有算法应用到每一个 batch 上，将 CPU 和 GPU 之间的通信减少到最小。

9202 0

玩转3D Swiper美女性感秀之思路分析

CSS3·画出最懂你的3D魔方 Canvas·手把手教你如何绘制一辆会跑车解析：创建列DIV ：从上图中我们能看出，每次旋转的动画是由多列小卡片组成的；每列根据它的下标，对背景进行位移，做到拼接的效果...，整体看起来就成了一张图一起来看一下真像是啥样的： [旋转的动画是由多列小卡片组成] colNode(){ //生成列的节点 for (var i=0;i<this.colLen;i+...position、transform等设置，一张图，让你看懂全世界：—— 图五为完成输出 [单列的构成之四个面的展示] //——[正、上、左、右] for(var i = 0;i<4;i++){...之前创建结构的时候，我们已知div的列数，为了更好的装B，我们在旋转的时候，给每列都要添加一定延时setTimeout，得以达到缓冲的视差，然后requestAnimationFrame就该它出场了...，都是展示一张图，这样就不用每次旋转完后又去重置图片、角度等问题，包括requestAnimationFrame动画切换的过渡过程，也应该有更好的方式，新手上路中，欢迎各位大佬指点。

1.5K0 0

LuckySpin：打造一款温暖又惊喜的幸运转盘小工具

于是我打开了 CodeBuddy，说出我的点子：“我想做一个单页 Web App，叫 LuckySpin，点击按钮生成‘今日小幸运’，风格要活泼明亮。”...整个页面的背景是奶油黄 (#FFF8E1) 到珊瑚粉 (#FF8A80) 的渐变，搭配柔光混合模式，屏幕看起来就像春日阳光洒在草地上那样舒服。...于是我回顾了代码，发现问题出在 CSS 控制显示的方式上。...这次修改之后，幸运语句终于正常出现了，而且还带着淡淡的卡片飞入动画，视觉上就像是礼物一样飘到眼前，非常治愈。...后记：CodeBuddy 不只是“助手”，更像一位搭档这次 LuckySpin 的制作过程非常轻松愉快，我完全没有陷入琐碎的 CSS 或 JS 调试之中。

3561 0

【CSS】骨架屏 Skeleton 效果

现在很多网站在加载数据的时候，为了避免页面过于空白，都会用这种方式预告将会有内容载入，从而提升用户体验：这个效果中文叫作骨架屏，英文叫 Skeleton，今期会跟大家分享在 CSS 上实现这个效果的方法...HTML 的部分打开 CodePen 编辑器，在 HTML 的部份加入一些结构，例如是一张卡片。...新增一个标签，class 名为 card；这张卡会有一张图片，加入一个，class 名为 image，在里面加入一张图片。...制作骨架屏回到 HTML 的部份，复制多一张卡片，不过清空里面的图片和文字，以及加入一个名为 loading 的 class，我们会将骨架屏的效果套用到这张卡片上。...动画的部分现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的，所以我会将背景设定为渐层颜色。

2.9K4 1

Power BI 鼠标悬停切换图片图表

高飞老师有制作一个Power BI学习资源导航页，包含官方资料、常用工具、中英文网站、图书、公众号等等。...尽管有年头没更新了，但依然没有见到超越这个的存在，访问网址： https://hao.powerbigeek.com/ 导航页公众号这个分类，有个非常有趣的交互效果，鼠标悬停在公众号图标上，会自动弹出对应二维码...比如有产品图片，悬停后可以切换另一张该产品的图片。《Power BI 商品分析绝招：产品动态展示》我介绍了使用新切片器实现这种效果的办法。这个方法需要叠图，且扩展能力有限。...我在本公众号分享了海量的Power BI SVG图表，SVG图表可以看作是特殊的图片，当然也可以使用同样的原理进行悬停切换。以下是产品图片到卡片图的切换，其他图表类型同理。...更多Power BI动画效果：Power BI 动画效果总结

8351 0

纯血鸿蒙APP实战开发——一镜到底“页面转场”动画

介绍本方案做的是页面点击卡片跳转到详情预览的转场动画效果效果图预览使用说明点击首页卡片跳转到详情页，再点击进入路由页面按钮，进入新的路由页面实现思路首页使用了一种视觉上看起来像是组件的转场动画，这种转场动画通常是通过组件的动态加载和切换来实现的...实现方案如下：1、入场动画：采用stack布局，容器内有瀑布流卡片列表CardList和卡片详情页DetailPage（展开时是详情页，未展开是卡片组件） build() { Stack() {...2 : 0)4、入场动画：CardPage内部监听expandCardId值变化，触发expandCardId相关的显式动画，透明度动画控制卡片组件和卡片详情页不共用组件的显隐 @Prop @Watch...：点击返回按钮，触发重置为this.expandCardId = -1，卡片组件宽高动画和卡片组件和卡片详情页不共用组件的显隐动画，都关联expandCardId属性。...即可实现出场动画。6、一镜到底实际上是在动画开始前将UI显示相同的A组件覆盖到B卡片组件上，入场动画和出场动画作用A一个组件上。

4231 0

520心动攻略：从走心表达，到定制网页，全方位打造你的专属浪漫！

无声的体贴：在TA忙碌时，悄悄递上一杯热水；在TA疲惫时，轻柔地揉揉肩；在TA困顿时，递上一张写满鼓励的纸条。这些无声的关怀，是爱最动人的诠释。...它可以是一封长长的情书，回顾你们的甜蜜瞬间；也可以是一张简单的卡片，写上几句真挚的祝福。...情感派：触动心弦的温度定制相册/相框：将你们在一起的珍贵照片整理成册，或者选择一张最有意义的照片，制作成精美的相框。....container：为主要内容区域设置半透明卡片效果，使其在背景上浮现。 3. 点睛之笔：浪漫的心形飘浮动画 ❤️ 没有动画的520页面，就像没有惊喜的礼物！...制作好页面后，如何让Ta看到呢？最简单的方式是：本地分享：直接将HTML文件发送给Ta，Ta在浏览器中打开即可。

6451 0

「苹果风」PPT设计要注重哪些要素

这张幻灯片上只有「Privacy」一个单词，是在讲一个硬件的隐私保护，还是在讲某款软件的隐私保护呢?光看幻灯片你是无法得到结论的。那我们在什么情况下可以使用苹果这样「表意不明」的幻灯片呢?...首先我们在第一页放上手表，并将两个想要切换的表带放在画面外。 03.png 　　接下来在第二页幻灯片中，将表带统一右移。　　...这样的动画变换可不止能利用在「换表带」上，只要脑洞够大，很多风格的动画效果都可以利用「平滑」切换来做到，还记着上面介绍产品的幻灯片么?...这并不是在一张幻灯片里完成的动作，而是在两张幻灯片的上方都压着一个黑色的长方形，第一张幻灯片选择进入动画里的「擦除」，第二张幻灯片里选择退出动画里的「擦除」，这样，就可以在点击鼠标进行动画的同时，神不知鬼不觉的切换幻灯片...上面的切换中，使用了PPT的一组动画，「」使用的是退出动画里的「浮出」，而后面的五个产品使用的是进入动画里的「浮入」，看起来像是在一页中完成了文字的变换，事实上它们是两页的内容。

1.5K4 0

用 CodeBuddy 搭建我的个人博客：技术小白的零门槛建站实践指南

@TOC 技术栈在搭建我的个人博客前，需确定适配的技术栈。...独立页面：新建了 statement.html 页面专门存放声明内容，页面风格与主站统一，采用浅色背景、渐变文字和半透明卡片的设计，避免了主页面的冗余，也让声明信息更加正式。...博客专栏：以卡片形式展示不同的博客专栏，每个卡片包含专栏标题和简介，点击卡片可直接跳转到对应的 CSDN 专栏页面。...第四次迭代：强化博客页，打通外部专栏 5.1 博客列表的精细化呈现首先，对博客文章的展示形式进行了优化，使每篇文章卡片既符合科技风调性，又能清晰传递核心信息：卡片设计：采用半透明背景，搭配轻微的边框和阴影...）入场动画区：进度条加载个人展示区：上侧为文字介绍，包含阿里云专家博主等认证信息；底部的技能标签，在鼠标悬停时会上浮变色。

7792 1

iOS开发常用之网络

Atlas-iOS - 快速在iOS里集成聊天功能，类似开源版本的环信.Layer家开源了一套聊天app界面的解决方案。看起来很赞，很多蛮复杂的东西直接都帮封好了。...答案选择切换页 - 将scrollview和tableview封装在一起，在初始的时候简单的将数据带上，就可以一页一页的左右来回滑动。...HotGirls - 卡片动画。 tispr-card-stack - swift卡片风格动画切换组件及完整交互示例。...更赞的是额外附了详细开发教程如何在Swift中制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。...ZLSwipeableViewSwift - ZLSwipeableView - ZLSwipeableViewSwift在Tinder和Potluck中的动画效果实现思路（连续卡片翻页效果），最贴心的是作者提供了

31.5K1 0

AI视频制作全攻略：从分镜到生成，一站式解决方案

你的核心任务是，基于我刚刚上传的视频文件，对其进行分镜解构，并为每个关键分镜逆向推导出其对应的、能够生成画面的AI视频提示词和每个场景的文案。...光滑哑光材质，浮动白色卡片或半透明玻璃元素流畅的路径动画、缩放和元素聚合典型分镜示例：分镜1：研发管理难题 text 中文提示词：极简扁平化3D风格。...一个坐在白色椅子上的绿色T恤卡通职员，从挠头困惑变为双手高举庆祝。一条发光的科技曲线从他指向右上方一个快速增长的白色图表卡片，标有醒目的"80%"。极简室内背景。...AI功能演示视频制作 6.1 TAPD故事墙分镜设计整体风格：扁平化/极简主义动画，企业产品介绍片调性典型分镜：分镜2：问题展示 text 中文提示词：等距透视插画动画。...画面中一张卡片被鼠标选中并移动，卡片上包含图片、进度条和时间信息等。界面细节精致，光线均匀。

2.4K1 1

从0开始部署个人博客——原以为又要烂尾，结果CodeBuddy带我嘎嘎乱杀

实战场景：在调试博客移动端适配时，我通过以下步骤快速完成： 1.点击 "Preview"，切换到 "手机 - 375px" 视图； 2.发现文章标题在小屏上换行混乱，预览区自动标注 "文本溢出，建议缩短标题长度或减小字体...3.第二次迭代：重构主页面，聚焦核心信息使用中发现，初始的 "个人主页 + 博客 + 项目展示" 在同一页面堆砌，导致信息过载。...响应式与交互动效优化屏幕适配：在小屏设备上，项目卡片的布局转变为单列布局，通过 grid-template-columns: 1fr 设置，宽度自适应屏幕。...视差效果：当用户滚动页面时，项目卡片与技能区采用不同的移动速度，项目卡片移动稍慢，创造出页面的深度感。...功能效果：交互细节：导航链接 hover 时金色下划线从 0 扩展至 100%；技能标签 hover 时从淡金变纯金并上浮 3px；项目卡片闪光动画持续 3 秒循环；代码展示：文章页 Python

6521 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭