上海公司网站制作:6微交互,这将使您的Divi网站更令人愉快

2019.05.05 关键词:

微交互是增强用户体验的好方法,因为它们与您的站点交互。图标、图像或表单字段的轻微动画可以提示用户以一种有趣和有目的方式采取行动。有无数的微互动,你可以包括在你的网站,但一个好的经验法则是保持他们的“微”。你不会想逾期的。

今天,上海公司网站制作将向大家展示一些与Divi无缝工作的简单的微交互。一些更高级的微交互需要更高级的jQuery来实现。但是,在本教程中,我将向您展示如何仅使用CSS添加一些动画。我将专注于用户通常与之交互的元素-按钮、图标、图像和表单。

divi附带了一个图标库,可以通过Blurb模块轻松地添加到您的站点。这对于添加一些重要的信息,比如特性或技能,是非常有用的。如果您想提请注意您的信息,您可以动画图标以上您的内容。

我将向你们展示触发图标动画的两种方法。在第一个示例中,当在实际图标上盘旋时会触发图标动画。我使用的动画类型是旋转、抖动和缩放。

首先,添加您的模糊模块。使用DiviBuilder,添加一个具有三列布局的标准部分,并在第一列中插入一个blurb模块。

上海公司网站制作

在Blurb模块设置中,更新以下设置:

输入标题
输入URL(我现在正在使用#)
使用图标:是的
选择一个图标
图标颜色:#0c71c3
图像/图标动画:无动画
内容:[添加内容]

在自定义CSS下,添加一个名为“旋转”的CSS类。这将用于触发旋转动画。

储蓄与退出

在我们添加自定义CSS之前,通过复制您之前做过的两次并将它们拖到两个空列来设置接下来的两个空格。

单击第二个(中间)闪光灯上的汉堡包图标来编辑设置。在BlurbModuleSettings下,转到自定义CSS部分,并将CSS类“旋转”替换为新的类“抖动”。

储蓄与退出

对右侧列上的第三个blurb重复相同的进程,并将CSS类“旋转”替换为一个名为“Scale”的新类。

既然你的脱口秀已经到位了。转到divi→主题选项,并在自定义css框中添加以下内容:

.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.rotate .et-pb-icon:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.shake .et-pb-icon:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.scale .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

检查您的网页,并悬停在图标上,以查看效果的行动。

触发图标动画的第二种方法是悬停在blurb模块区域上。

为此,请用以下内容替换刚才添加的CSS:

.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.5s ease-out;
}
.rotate:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.scale:hover .et-pb-icon {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

.shake:hover .et-pb-icon {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

当没有按钮的内容时,这种效果是非常有用的。让图标在悬停上移动是一种有用的微交互,使用户能够点击图标。

#2在CTA按钮中添加脉冲动画

上海公司网站制作在你的CTA按钮上添加一个脉冲动画可以是一个有效的注意力抓取器。诀窍是让它变得足够微妙,这样它就能在不分散注意力的情况下吸引用户的注意力。

首先,添加一个具有全宽度列的标准部分。然后添加一个呼叫行动模块。在“调用操作模块设置”的“一般设置”下,更改以下内容:

输入标题
输入Button URL(我现在使用的是“#”)
输入按钮文本(我使用的是“单击我!”)
使用背景色:是
背景色:#DDDDDD

在“高级设置”下,更改以下内容:

为按钮使用自定义样式:是
按钮文本颜色:#ffffff
按钮背景颜色:#2ea3f2
添加按钮图标:否

在自定义CSS下添加CSS类“脉冲”。

现在转到Divi→主题选项,并输入以下自定义CSS以获得脉冲效果:

.脉冲.ET_PB_按钮{
动画-名称:脉冲;
动画-持续时间:5000毫秒;
变换-起源:70%,70%;
动画-迭代-计数:无限;
动画-计时功能:线性;
}

@关键帧脉冲{
0%{Transform:比例(1);}
30%{Transform:比例(1);}
40%{Transform:比例(1.08);}
50%{Transform:比例(1);}
60%{Transform:比例(1);}
70%{Transform:Scale(1.05);}
80%{Transform:比例(1);}
100%{Transform:比例(1);}
}

.脉冲.ET_PB_按钮:悬停{
动画:无;
}

现在你的CTA按钮每5秒会有两次脉冲。

#3对CTA按钮增加升力效果

接下来的效果是提升CTA按钮而不是脉冲。在悬停时,它轻轻地抬起按钮,下面有一个阴影,这样就产生了海拔的感觉。

现在我们上海公司网站制作已经创建了CTA部分,请复制刚才为脉冲CTA创建的整个部分。

单击此处可编辑新复制部分的区段模块设置,并将背景色更改为#ffffff。

储蓄与退出

现在编辑调用动作模块设置。在“高级设计设置”下,更改以下内容:

添加按钮图标:是
选择Button图标(下面的箭头很适合这个例子)
按钮图标颜色:#ffffff
只显示图标上的按钮:不

在“自定义CSS”下,在“自定义CSS”选项卡下添加名为“Lift”的CSS类。

转到divi→主题选项并添加以下自定义CSS:

.lift .et_pb_button:hover{
box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
margin-top: -5px;
margin-bottom: 5px !important;
}

看看结果。

#4在Hover上旋转按钮图标

若要使按钮图标在悬停时旋转,请返回到“调用动作模块”设置,并在自定义CSS下添加CSS类“旋转-图标”(类“提升”后的一个空间)。

然后转到divi→主题选项并添加以下自定义CSS:

.旋转-图标.et_pb_按钮:悬停:后{
-webkit-转换:旋转(-90度);
变换:旋转(-90度);
}

去看看你的按钮。注意,按钮图标逆时针旋转90度,为用户创建一个微交互,从而给出方向。

#5添加与图像的微交互

添加与图像的微交互就像蛋糕上的糖霜。图像已经很吸引人了,并且增加了另一个互动维度,让它们具有你可能需要的额外的可点击性。

我们开始吧。添加具有三列布局的标准部分,并在第一列中插入图像模块。

单击此处可编辑图像模块设置。在“一般设置”下,上传图像并切换选项“Open in Lightbox”为“是”。

在自定义CSS下,添加CSS类“倾斜”。

储蓄与退出

复制图像模块两次,并将它们拖到行中的其他两列中。

上海公司网站制作

现在,在Divi→主题选项中添加自定义CSS:

.tilt.et_pb_image {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
border: 1px solid #fff;
}

.tilt.et_pb_image:hover {
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-o-transform: rotate(5deg) scale(1.1);
transform: rotate(5deg) scale(1.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}

现在,请查看页面上的图像行。

悬停时,图像大小增加10%,旋转5度,并使用阴影弹出页面。

现在,让我们添加一个相反的效果。这一次,图像将开始倾斜和阴影。然后在悬停时,图像将返回到正常状态。

复制您刚才所做的图像行。

现在检查行上的三张新照片中的每一张,并将自定义CSS类从“倾斜”更改为新的“直”类。

然后在divi→主题选项中添加自定义CSS:

.straight.et_pb_image {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(-5deg) scale(0.8);
-webkit-transform: rotate(-5deg) scale(0.8);
-o-transform: rotate(-5deg) scale(0.8);
transform: rotate(-5deg) scale(0.8);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}

.straight.et_pb_image:hover {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
border: 1px solid #fff;
box-shadow: none;
}

<

#6动画接触表单字段

最后一次微交互在Divi的联系人表单上为输入字段添加了一些动画。这种微交互的目的是帮助用户在填写重要信息的过程中。悬停和聚焦对输入字段的影响有助于在整个过程中进行识别和保证。而且,它很容易实现。

首先,将联系人表单模块添加到具有全宽度列布局的标准部分。编辑行模块设置。在“常规设置”下,将“使用自定义宽度”设置为“是”,并将自定义宽度设置为600 px。

储蓄与退出

下一步,编辑联系人窗体设置。

在“一般设置”下,将“显示Captcha”更改为“否”。(任择)

在自定义CSS下,添加一个名为“边框左”的CSS类。

转到divi→主题选项并输入以下自定义CSS:

.border-left .et_pb_contact p input, .border-left .et_pb_contact p textarea {
height: 60px;
border-left: 4px solid #ddd;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

}
.border-left .et_pb_contact p input:hover,.border-left .et_pb_contact p textarea:hover, .border-left .et_pb_contact p input:focus, .border-left .et_pb_contact p textarea:focus {
border-left: 8px solid #2ea3f2;
font-size: 16px;
}

就这样。您现在有一个简单的,但交互式的联系形式,添加了一个彩色标签效果,并结合在悬停和焦点上的输入字段字体大小略有增加。

最后思想

上海公司网站制作希望你能发现这些微观互动很有用。他们是简单的使用Divi(只使用CSS)整个网站。可以随意调整这些例子的CSS以满足您的需要,或者想出一些全新的东西。


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监

安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三