这是一种使用 HTML 和 CSS 创建的简单而惊人的动画效果,其中照片像滚轮一样一张一张地水平移动。当鼠标指针出现在照片上时,特定照片将停止移动。
方法:这些动画的基本思想来自于CSS动画的悬停效果。让我们看看代码是如何工作的。
HTML 代码:照片将使用 HTML 在圆环中移动。为了创建动画,我们使用了一个“div”和一个部分来正确维护照片的区域,并且在 CSS 代码中使用了类名。我们为将在页面中显示的照片使用了 HTML图形和img 标签。
HTML
HTML
CSS 代码:让我们谈谈代码的 CSS 部分。使用了一些基本属性,如边距、填充、位置、浮动、边框、动画等,这将帮助照片为它们提供正确的位置。它有助于在 2D 中旋转照片。首先它绕着自己的轴旋转。然后整个“div”围绕其轴旋转。
要创建此动画,请使用figure:nth-child(“no. of child”)属性。 transform:rotateY(amount of deg)和translateZ(–px)是 CSS 的两个属性,有助于旋转对象。
最终代码:在本节中,我们将结合以上两节(HTML 和 CSS)代码。
HTML
输出: