使用免费元素器页面生成器创建移动背景图像动画

Free Elementor 页面构建器创建移动背景图像动画,现在对我来说似乎非常容易,在这里你需要在页面内添加一些 CSS 代码,还有一种方法可以添加 CSS 代码 free Elementor。

我要分享一些与背景图像惊人的东西,创造一些看起来引人注目的令人惊叹的东西真的很有趣,以下是不同类型的两个来源 元素页背景 並 元素或倾斜背景 如果您想以创造性的方式排列元素页或部分背景,请务必选中此项。 

什么是移动背景图像动画?

甲 移动背景图像动画 是循环的CSS动画,它会在你的页面内容后面慢慢滑动宽幅背景图像,因此该部分在不加载视频文件的情况下感觉很有活力,在Elementor中,你用全高部分构建它,两个间隔符携带CSS ID bg 並 叠加的,以及一小块 CSS @keyframes 粘贴到 HTML 小部件中的代码—无需 Elementor Pro 许可证,也不需要 JavaScript,它是最轻的代码之一 元素动画效果 您可以添加,因为浏览器会动画化单个变换而不是播放媒体。

首先让我们看看下面的视频到底是什么样子。

本节可在 主插件模板库 为免费。如果您是 a,则可以轻松地在您的网页中导入此内容 主插件和 Elementor 页面构建器插件 插件用户。 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

检查 如何安装和激活主插件插件

Elementor 创建页面或发布并编辑它, 您将看到主插件模板库图标。 

MA Tempalte 库上点击等待几秒钟加载数据, 您将看到“准备页面”和“剖面”, 点击剖面选项卡等待几秒钟, 现在您将看到“移动背景图像动画”。 

现缩放图标进行预览,然后会看到一个插入按钮,点击这个“插入”按钮,一键获得这个模板,之后就可以自由编辑内容了。

您的版块会是这样的,我在我的localhost中使用WordPress默认主题,只需点击标题或段落或社交即可编辑内容。 

如果您想添加自己的图像和覆盖效果,那么您应该移动到 更改 BG 和叠加图像部分 现在。

移动背景图像动画教程

简答:构建一列 Elementor 部分,设置为 “Fit to screen”,添加带有 CSS ID 的间隔符 bg 内容上方和带有 ID 的第二个间隔符 叠加 it下面,然后把下面的css动画代码粘贴到html小部件中,在自己的镜像url中进行交换,你需要三个资产—一个宽背景镜像,一个png覆盖和一个svg覆盖—而且整个构建在免费的elementor页面构建器上大约需要十分钟。

您需要的资产: 

1. 具有 1500 x 500 像素尺寸的图像
2. PNG 覆盖图像
3. SVG 覆盖图像

现在添加一个单柱结构并使其高度为 “适合筛选”。 

Now添加你的内容即可,我准备在这里分享演示内容排版信息。 

题(已使用的元素或默认标题元素):字体族:来源Sans Pro,字体大小:120px,字体重量:900,线高:140,字母间距:-5,颜色:黑色

文(已使用的元素器默认文本编辑器元素):字体家族:来源Sans Pro,字体大小:30px,字体重量:400,线高:40,颜色:黑色

社交(使用元素或默认社交元素):形状:圆形,对齐方式:中心,颜色:定制,原色黑色:rgba(175,175,175,0),次色:黑色,尺寸:40,空间:30,边框类型:实心,边框宽度:2,边框颜色:黑色

GIF动画看看下面,你就会明白如何在你的元素或元素中应用所有这些属性。 

Z-index=1 放入每个元素使用高级选项卡, 只需点击每个元素, 导航到高级选项卡即可, 勾选下面的图片。 

(如果错过了这个 那么添加移动背景图片CSS代码后会面临编辑元素内容的问题, 不放z-index这里就得用Elementor导航器系统编辑内容。)

现添加两个间隔符,一个是标题的顶部,另一个是社交媒体图标的底部。 

将“BG”作为ID放入顶部垫片。并将“覆盖”作为ID放入底部垫片。 

在顶部间隔件中添加 BG ID

在底部间隔件中添加覆盖 ID

加“HTML”元素在社交媒体图标下或第二个间隔符的顶部。 

更改 BG 图像和叠加图像链接

Moving BG 图片动画资产,你还记得吗,现在是时候上传到你的网站了,上传背景图片、PNG 覆盖、SVG 覆盖图片,然后复制这 3 个链接,在你的代码编辑器或者记事本里向下列出。 

Copy下面的代码在你的代码编辑器中。并更改背景图片链接, PNG和SVG图片叠加链接。我添加了两个截图, 你可以轻松找到你应该更改哪些链接。 

单击每个图像即可查看高分辨率版本。 

更改背景图像 URL

更改覆盖图像 URL

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

现在用 Bg 和 Overlay 图像复制您编辑的代码,然后将其粘贴到 HTML 元素中,您会立即看到结果。如果您知道如何使用 CSS,那么您也可以自定义动画。

让我们将文本颜色和社交媒体颜色更改为白色,看看我向您展示的确切外观。

Elementor页面构建器插件创建移动背景图像动画的全部内容,您可以通过使用我们的来对您的内容进行风格化 主插件 Addon 的插件 too。this 将为您的页面固定背景,如果您想为一个部分设置移动背景,那么只需将位置更改为“绝对“. 

Face任何问题,在此随意评论,我将指导您自定义移动BG图像动画。

常见问题