如何在Weebly中添加透视图像悬停效果

透视图像悬停效果

很难解释透视悬停效果会是什么样子。 最好的选择是直观地显示，下面是具有悬停效果的图像示例。 您可以将鼠标移动到图像上以查看透视悬停效果。

注意 这个小部件主要是为桌面设备设计的。 如果您想在手机上使用此小部件，请确保不要链接图像并使用可以在小屏幕中正确对齐的较小尺寸的图像。

如何为图像添加透视悬停效果？

您可以使用 CSS 来创建小部件，而无需任何 JavaScript。 该过程包括三个简单的步骤：

• 将图像上传到您的 Weebly 网站
• 添加 CSS 代码
• 添加 HTML 代码

让我们详细解释每个步骤，以便您可以按照说明进行操作。

第 1 步 – 上传图片

第一步是准备要添加透视悬停效果的图像。 您可以从公共领域找到免费图像，或使用 Photoshop 或 Snagit 等工具创建自己的图像。 您也可以使用来自 Weebly 的图像，但是，当您这样做时，版权信息将被添加。

• 登录到您的 Weebly 帐户并编辑您要添加小部件的站点。
• 当您在 Weebly 编辑器中时，导航到“主题”部分，然后单击屏幕左下角显示的“编辑 HTML / CSS”按钮。 不幸的是，Weebly 隐藏了此按钮的可见性，因此您可能需要放大才能清楚地查看该按钮。
• 单击“编辑 HTML / CSS”按钮将进入 Weebly 代码编辑器，您可以在其中修改站点的源代码。 但是，我们不需要修改代码，但需要上传图片。
• 单击“资产”旁边可用的 + 按钮，然后选择“上传文件”选项。
• 上传要添加悬停效果的图像。

• 上传图片的 URL 应如下所示：

https://yoursitename.weebly.com/files/theme/image-name.jpg
or
https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/218853455352650432/files/image-name.jpg

• 您也可以简单地选择上传的图像文件并右键单击右侧窗格中显示的图像以复制图像地址。

现在，单击右上角显示的“保存”按钮以保存您的更改。 如果这是您第一次在代码编辑器中进行更改，您需要为您的主题提供一个名称并保存它。

第 2 步 – 为悬停效果添加 CSS 代码

接下来，步骤是创建 CSS 以在上传的图像上显示透视图像悬停效果。 转到 Weebly 编辑器中的“页面”部分，然后选择要在其中添加小部件的页面。 单击该页面的“SEO 设置”按钮，然后转到设置部分的底部。 我们为您准备了 CSS 代码，您只需将代码复制并粘贴到“标题代码”部分下即可。 确保将图像 URL 替换为步骤 1 中您自己的图像 URL。

<style type="text/css">
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background: 
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
url("https://www.infoxiao.com/wp-content/uploads/2022/08/如何在-Weebly-中添加透视图像悬停效果？.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
.thumb a:after {
content: ''; position: absolute; left: 0; bottom: 0; 
width: 100%; height: 36px;
background: inherit; background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg); transform-origin: bottom;
}
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); 
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s; 
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
</style>

它在编辑器中应该如下所示：

第 3 步 – 添加 HTML

最后一步是添加 HTML 以在内容区域中显示透视图。 使用“嵌入代码”元素将以下代码复制并粘贴到内容区域。 同样，请确保在 HTML 中使用来自 step in 的正确图像 URL。

<div class="thumb">
<a href="https://www.infoxiao.com/wp-content/uploads/2022/08/如何在-Weebly-中添加透视图像悬停效果？.jpg">
<span>KungFu Panda</span>
</a>
</div>

该图像可能在 Weebly 编辑器中不可见。 发布您的网站并将鼠标悬停在图像上以查看透视图像效果已添加到图像中。 如果您正在寻找在图像上展示具有如下透视悬停效果的社交共享图标，请查看本文以获取完整代码。

推荐：如何阻止用户更改Windows上的屏幕保护程序