网页组件

网页简介 让图像在复杂和重叠动画中变得非常简单，我们在带有许多缩略图的图像网格上尝试使用此新功能。创建了四个演示，每个演示具有不同的交错效果，可隐藏并显示小图像以显示其下的某些内容。 图片预览

网页简介 在过去的两年中，失真效应变得非常流行，现在许多非凡的网站设计都以这种独特的形式展现了这种有趣的趋势。今天，我们分享两个演示,我们使用它来滚动和鼠标移动时达到文本变形。 图片预览 演示中主要是在uniform滚动页面时更改材质的值，滚动速度越快，值变化越多。

网页简介 今天我们想分享一个基于CSS网格的幻灯片模板，在主图像和标题上具有层运动效果。并向主图像和标题添加类似视差的效果。对于标题，我们添加了两个带有轮廓样式的复制图层，可创建有趣的运动效果。 图片预览

网页简介 一组五个演示，其中包含通过THREE.MeshLine库创建的动画WebGL线。构建一个自定义几何图形，这些形状像丝带的线条具有非常有趣的图形样式。 图片预览

网页简介 这里分享几个网页背景动画，想法是创建一个动画集合，这些动画看起来很有趣，而不会（太）分散注意力，并且可以轻松地应用于网页背景。 图片预览

网页简介 图像幻灯片快速运动过渡效果，通过某些背景条纹的来增强动画中的效果。在幻灯片放映过渡中要执行的操作：将压缩图像并添加一些背景效果。此外，我们将使标题字母连续地飞走。 图片预览 单击“下一个”或“上一个”时，图像将移动并被挤压以产生快速加速的幻觉。字母将飞走，背景形状将开始“脉动”。

网页简介 三组链接悬停效果，鼠标指针在链接时显示具有特殊效果的缩略图。当将鼠标悬停在带下划线的链接上时，您可以看到缩略图。这三组特效看起来都非常不错，有需求可以看看！ 图片预览

网页简介 布局包括每个“页面”的自定义CSS设置，创建平坦的页面翻转外观，菜单允许在页面之间跳转，屏幕两侧的蓝线用作装饰性指示器，类似于书的封面（从书的内部查看），旧浏览器不支持的CSS Grid和CSS Custom Properties。 图片预览

简介 背景中显示导航和一些具有轻微视差效果的分散图像。单击“浏览”链接后，看似随机放置的项目将以动画的形式最终显示它们在网格中的最终位置。每个网格都有其自己独特的布局。动画完成后，整个内容将变为可滚动状态，并且在网格下方显示一个内容区域。 图片

分享一个简单的全屏菜单，菜单布局是由CSS网格布局，并且让它的网状盒子显示一个动画特效。单击右上角的菜单图标时，将打开菜单。

一个运动悬停的项目和内容预览，可滚动,网格项目被点击时，图像动画到页面的中心，并将其放大。项目的背景也会放大，填充整个页面，形成内容预览的新背景。内容预览是可滚动的，更多的文本显示在图像下面。

设计简介 幻灯片在页面的中心，轮播图像横向滑动特效，一个在左上角和一个在右下角的页面，单击当前幻灯片时，装饰背景元素扩展到全屏幕，图像移动到屏幕的左侧，内容在屏幕上动画化。 图片预览

菜单简介 从页面的右上角分别显示网格的方框，类似于扩展网格菜单，为了展示菜单，创建了一个小幻灯片，当鼠标单击时，右侧按钮展开细节！ 图片预览

设计简介 幻灯片显示页面中心有一个中等大小的图像。标题也放在中间突出位置，当导航下一张幻灯片时，一个与页面背景颜色相同的显示元素特效覆盖当前图像。 图片预览

资源信息 带有“三张图像面板”的布局的幻灯片设计，幻灯片显示页面在两侧，下一张和上一张幻灯片的预览。并且对所有图像和标题使用了显示效果并设置动画。

资源信息 一个简单的全屏图像显示缩略图滑出视口以显示更大图像的效果,完整的图像显示效果与幻想缩略图滑动。

资源信息 一个具有悬停效果和内容预览的网格布局，当指针在某个网格项目时，将出现悬停效果。单击某个内容时，将滑动到内容预览叠加层中，并将网格项目和预览项目制作为动画。

资源信息 今天分享一个小菜单动画，点击时，一些不同大小的盒子会滑出并填满屏幕，设置了两种不同的风格，看看截图并查看演示。要打开菜单，请点击左下角！

资源信息 在幻灯片中，设计有一个不同的场景：在特定时刻应用故障闪烁的效果，并将图像与下一张幻灯片中的新图像进行交换，这种动画也可以用于悬停效果。

资源信息 图片的每个元素都将被分割为多个片段，这些片段将以不同的方式进行动画处理

资源信息 切片可以是垂直的或水平的，并且可以来自不同的方向。使用切片的数量，延迟和颜色，创造出大量可能的效果。

资源信息 偶然在Akademi的网站上发现的一个非常好的效果：页面的标题随着一个向下滚动并随着当前在视口中的部分而改变。是一个非常好的效果，可以在文本发生变化时重新创建和使用不同的动画。

资源信息 它有一个非常有趣的布局，内容/图像幻灯片和扩展元素，布局由分层的CSS网格支持，这使得我们可以使用更多的语义HTML结构。

资源信息 这种效果的灵感来自Diana Hlevnjak，使用anime.js动画和迷人的字母效果。