亿信ABI-DEMO解析第八期:导航页

4400
7

前端小姐姐 小试身手Lv3

发表于2020-6-30 18:54

楼主
一、页面效果图

微信图片_20200630180938.png

二、导航页门户说明
这个页面是通过前端脚本文件实现的页面结构和js都写在index.html文件里,样式文件有style.css,下边来简单介绍几个效果实例的具体实现方法:

1、文字渐变效果
图片1.png
background-image:-webkit-linear-gradient(left,#ffffff,#00fffc);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
代码实现的是从左到右渐变,也可以background-image: linear-gradient(to bottom right, red, yellow);指定水平和垂直的起始位置来制作一个对角渐变
还可以使用角度:background-image: linear-gradient(angle, color-stop1, color-stop2);
线性渐变 - 从上到下(默认情况下)

2、过程动画(7个圆依次转动
2.gif
第一个圆转动动画:
{
    animation: yuanxz01 7s ease 1.8s;
}
@keyframes yuanxz01 {
    0%{
        transform: rotate(0) scale(1);
    }
    12.5%,100%{
        transform: rotate(720deg) scale(1);
    }
}
第二个圆转动动画:
{
    animation: yuanxz02 7s ease 1.8s;
}
@keyframes yuanxz02 {
    0%,12.5%{
        transform: rotate(0) scale(1);
    }
    25%,100%{
        transform: rotate(720deg) scale(1);
    }
}
第三个圆转动动画:
{
    animation: yuanxz03 7s ease 1.8s;
}
@keyframes yuanxz03 {
    0%,25%{
        transform: rotate(0) scale(1);
    }
    37.5%,100%{
        transform: rotate(720deg) scale(1);
    }
}
第四个圆转动动画:
{
    animation: yuanxz04 7s ease 1.8s;
}
@keyframes yuanxz04 {
    0%,37.5%{
       transform: rotate(0) scale(1);
    }
    50%,100%{
       transform: rotate(720deg) scale(1);
    }
}
第五个圆转动动画:
{
    animation: yuanxz05 7s ease 1.8s;
}
@keyframes yuanxz05 {
    0%,50%{
        transform: rotate(0) scale(1);
    }
    62.5%,100%{
        transform: rotate(720deg) scale(1);
    }
}
第六个圆转动动画:
{
    animation: yuanxz06 7s ease 1.8s;
}
@keyframes yuanxz06 {
    0%,62.5%{
        transform: rotate(0) scale(1);
    }
    75%,100%{
        transform: rotate(720deg) scale(1);
    }
}
第七个圆转动动画:
{
    animation: yuanxz07 7s ease 1.8s;
}
@keyframes yuanxz07 {
    0%,75%{
        transform: rotate(0) scale(1);
    }
    87.5%,100%{
        transform: rotate(720deg) scale(1);
    }
}
过程动画最关键的就是一定时间依次运动后,然后一直循环或者不运动,就是把每一个元素动画的时间相加作为总时间,然后关键帧里平分100%,上一个结束的值,当下一个开始时值,就好了

3、中间、以及左边切换的效果,主要用到的是jq的添加类、移除类
$(".navleft li").each(function(index) {
                $(this).click(function() {
                    $(".navleft li.active").removeClass("active");
                    $(this).addClass("active");
                    $(".navbot").addClass("active");
                    $(".navbot li:eq(" + index + ")").addClass("active").siblings().removeClass("active");
                    $(".navtop li:eq(" + index + ")").addClass("active").siblings().removeClass("active");
                });
            });


感兴趣的可以去查看代码看看整体,有什么好的建议也欢迎大家给到我

【文件资源】
html.zip (2.49 MB, 下载次数: )

最近看过此主题的会员

ncjindsif

esen_4T5FL2B71KC0

JCsang

张腾

980

esen_4PU3WCH0JE

cdysxy

四毛二

wangbing

灰龙

18705600725

咏之

18715311272

kudo23

SJQ

7个回答

只看楼主

18656978598 数据小白Lv1

发表于2020-7-1 15:38

只看该作者

取消 关注该作者的回复

沙发

能给上传个附件嘛

前端小姐姐 小试身手Lv3

发表于2020-8-10 09:36

只看该作者

取消 关注该作者的回复

板凳

【文件资源】就是 下载就可以直接预览的  代码有不清楚的 可以直接跟帖

左岸右转 数据小白Lv1

发表于2020-8-31 11:10

只看该作者

取消 关注该作者的回复

地板

非常棒的动画效果,求更多类似效果分享!

前端小姐姐 小试身手Lv3

发表于2020-9-17 11:01

只看该作者

取消 关注该作者的回复

5#

本帖最后由 前端小姐姐 于 2020-9-17 11:03 编辑

左岸右转 发表于 2020-8-31 11:10
非常棒的动画效果,求更多类似效果分享!

后期有合适案例会分享的,也可以去搜索里搜搜别的案例看看

鄞西布衣 数据小白Lv1

发表于2021-5-26 10:31

只看该作者

取消 关注该作者的回复

6#

abi里怎么配置?

wut 数据老手Lv5

发表于2021-6-7 14:27

只看该作者

取消 关注该作者的回复

7#

新建一个空白门户,拖一个子窗口在设计器内,然后选中页面,页面属性里面配置如下代码: 截图202106071428057459.png
$p.$("iframe1").setUrl("../../vfs/root/products/XXX/html/index.html"); //setUrl的路径换成对应文件的路径


前端小姐姐 小试身手Lv3

发表于2021-6-7 14:30

只看该作者

取消 关注该作者的回复

8#

还可以在酷屏里做成酷屏组件

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流