-
-
前端小姐姐 小试身手Lv3
发表于2021-4-26 20:05
楼主
一、页面效果图
二、页面说明
这个页面主要是帮助新用户快速了解ABI这款产品以及对其中每个功能（产品简介、数据源接入、数据整合、数据集、数据分析、分析制作、应用发布、工作流）的介绍，页面的过渡效果主要是通过css3的动画实现，‘下一步’切换效果主要用到jQuery 里的addClass、removeClass属性操作，用以实现一个个功能的展现，每一步中也会有一个视频对这个板块进行讲解。
下边来简单介绍几个效果实例的具体实现方法：
1、手型引导：引导用户点击查看视频
<div class="clickbox darktreebg">
<div class="circle">
<span></span>
<span></span>
<span></span>
</div>
<img src="hand.png">
</div>
.clickbox {
width: 0;
height: 68px;
margin: 0 auto;
position: absolute;
overflow: visible;
z-index: 999
}
.clickbox img {
position: absolute;
left: 3px;
top: 26px;
animation: fingerHandle 1s infinite alternate
}
.circle span {
display: block;
position: absolute;
top: 23px;
left: 0;
width: 20px;
height: 20px;
background-color: #4122eb;
border-radius: 50%
}
.darktreebg .circle span {
background-color: #fff
}
.circle span:nth-child(1) {
animation: fadeIn 1s infinite alternate
}
.circle span:nth-child(2) {
animation: shrink 1s infinite
}
.circle span:nth-child(3) {
animation: blowUp 1s infinite
}
@keyframes shrink {
0 {
opacity: .8;
filter: alpha(opacity=80);
transform: scale(1)
}
100% {
opacity: 0;
filter: alpha(opacity=0);
transform: scale(0.2)
}
}
@keyframes blowUp {
0 {
opacity: .6;
filter: alpha(opacity=60);
transform: scale(1)
}
100% {
opacity: 0;
filter: alpha(opacity=0);
transform: scale(2)
}
}
@keyframes fadeIn {
0 {
opacity: .3;
filter: alpha(opacity=30)
}
100% {
opacity: .6;
filter: alpha(opacity=60)
}
}
@keyframes fingerHandle {
0 {
transform: none
}
70% {
transform: scale3d(.85,.85,.85)
}
100% {
transform: none
}
}
2、点击‘下一步’按钮实现一个个功能点的展现
<div class="guide">
<nav class="active4">
<div class="kaip"> </div>
</nav >
</div>
.guide {
width: 790px;
height: 510px;
overflow: hidden;
}
.guide nav {
width: 100%;
height: 100%;
background-image: url(guidebgB.png);
}
.guide .kaip {
-webkit-transition: all 1.6s;
-moz-transition: all 1.6s;
-ms-transition: all 1.6s;
-o-transition: all 1.6s;
transition: all 1.6s;
width: 800%;
height: 100%;
}
.guide .active1 .kaip {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.guide .active2 .kaip {
-webkit-transform: translateX(-12.5%);
-ms-transform: translateX(-12.5%);
-o-transform: translateX(-12.5%);
transform: translateX(-12.5%);
}
.guide .active3 .kaip {
-webkit-transform: translateX(-25%);
-ms-transform: translateX(-25%);
-o-transform: translateX(-25%);
transform: translateX(-25%);
}
.guide .active4 .kaip {
-webkit-transform: translateX(-37.5%);
-ms-transform: translateX(-37.5%);
-o-transform: translateX(-37.5%);
transform: translateX(-37.5%);
}
.guide .active4 .kaip {
-webkit-transform: translateX(-37.5%);
-ms-transform: translateX(-37.5%);
-o-transform: translateX(-37.5%);
transform: translateX(-37.5%);
}
.guide .active5 .kaip {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.guide .active6 .kaip {
-webkit-transform: translateX(-62.5%);
-ms-transform: translateX(-62.5%);
-o-transform: translateX(-62.5%);
transform: translateX(-62.5%);
}
.guide .active7 .kaip {
-webkit-transform: translateX(-75%);
-ms-transform: translateX(-75%);
-o-transform: translateX(-75%);
transform: translateX(-75%);
}
.guide .active8 .kaip {
-webkit-transform: translateX(-87.5%);
-ms-transform: translateX(-87.5%);
-o-transform: translateX(-87.5%);
transform: translateX(-87.5%);
}
$(".xiabu").on("click", function() {
var dz = Number($(".guide nav").attr("class").charAt(6));
$(".guide nav").removeClass().addClass("active" + (dz + 1)),
$(".mask .focus li:eq(" + dz + ")").addClass("active").siblings().removeClass("active"),
4 <= dz && ($(".clicknext").addClass("active"),
$(".focus").addClass("active")),
7 === dz && $(".xiabu").html("立即体验"),
$(".guide nav").is(".active9") && $(".mask").hide()
}),
3、点击切换时，内容前进后退效果
<div class="tuB">
<img src="guideBrightB.png">
</div>
.tuB {
position: absolute;
left: 142px;
top: 176px;
width: 128px;
height: 266px;
opacity: 0;
-webkit-animation: moveinA .6s .3s forwards;
-moz-animation: moveinA .6s .3s forwards;
-ms-animation: moveinA .6s .3s forwards;
-o-animation: moveinA .6s .3s forwards;
animation: moveinA .6s .3s forwards;
}
@-webkit-keyframes moveinA {
from {
opacity: 1;
-webkit-transform: translateX(500px)
}
to {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@-moz-keyframes moveinA {
from {
opacity: 1;
-moz-transform: translateX(500px)
}
to {
opacity: 1;
-moz-transform: translateX(0)
}
}
@-ms-keyframes moveinA {
from {
opacity: 1;
-ms-transform: translateX(500px)
}
to {
opacity: 1;
-ms-transform: translateX(0)
}
}
@-o-keyframes moveinA {
from {
opacity: 1;
-o-transform: translateX(500px)
}
to {
opacity: 1;
-o-transform: translateX(0)
}
}
@keyframes moveinA {
from {
opacity: 1;
transform: translateX(500px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
以上就是对ABI云体验中新手引导几个小效果的介绍，有好的建议欢迎大家留言~
