-
-
前端小姐姐 小试身手Lv3
发表于2020-6-30 18:54
楼主
一、页面效果图
二、导航页门户说明
这个页面是通过前端脚本文件实现的，页面结构和js都写在index.html文件里，样式文件有style.css，下边来简单介绍几个效果实例的具体实现方法：
1、文字渐变效果
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个圆依次转动）
第一个圆转动动画：
{
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, 下载次数: )
>>DEMO解析列表<<
最近看过此主题的会员
7个回答
本帖最后由 前端小姐姐 于 2020-9-17 11:03 编辑
左岸右转 发表于 2020-8-31 11:10
非常棒的动画效果，求更多类似效果分享！
后期有合适案例会分享的，也可以去搜索里搜搜别的案例看看
新建一个空白门户，拖一个子窗口在设计器内，然后选中页面，页面属性里面配置如下代码：
$p.$("iframe1").setUrl("../../vfs/root/products/XXX/html/index.html"); //setUrl的路径换成对应文件的路径
