超漂亮的前台页面模板——html＋css＋js＋框架

时间  2019-12-06
标签 漂亮 前台 页面 模板 html+css+js html css 框架 栏目 HTML 繁體版
原文   原文链接

因为要从新找工做，因此作了一个本身的我的主页，以为还好，因此分享出来，也算是本身的一些记录。css

具体演示能够查看个人我的主页。html

大致都是一些css3的应用，干货实在不多，作来玩乐罢了。css3

第一次写这方面的文章，行散神也散，望海涵。git

首先，先列出less文件的公共部分以及常量。github

公共类：web

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/*居中*/
    .getCenter (@x, @y) { left : 50% ; right : 50% ; top : 50% ; bottom : 50% ; margin-left :- @x/ 2 ; margin-top : - @y/ 2 ;}
    /*圆角*/
    .getBorderRadius (@m) {
    border-radius:@m;
    -webkit-border-radius:@m;
    -moz-border-radius:@m;
    -ms-border-radius:@m;
    }
    /*过渡*/
    .geTtransition (@transition) {
    -webkit-transition:@transition;
    -moz-transition:@transition;
    -o-transition:@transition;
    -ms-transition:@transition;
    transition:@transition;
    }
     
    /*形变*/
    .getTransform (@transform) {
    -webkit-transform:@transform;
    -moz-transform:@transform;
    -o-transform:@transform;
    -ms-transform:@transform;
    transform:@transform;
    }
    /* 阴影 */
    .getBoxShdow (@boxshdow){
    -webkit-box-shadow:@boxshdow;
    -moz-box-shadow:@boxshdow;
    -o-box-shadow:@boxshdow;
    -ms-box-shadow:@boxshdow;
    box-shadow:@boxshdow;
    }
    /*动画*/
    .getAnimate (@animate) {
    animation: @animate;
    -moz-animation: @animate;
    -webkit-animation: @animate;
    -ms-animation: @animate;
    -o-animation: @animate;
    }
    .getTransform (@transform) {
    -webkit-transform:@transform;
    -moz-transform:@transform;
    -o-transform:@transform;
    -ms-transform:@transform;
    transform:@transform;
    }
     
    /*形变*/
    .getTransformOrgin (@transform) {
    -webkit-transform-origin:@transform;
    -moz-transform-origin:@transform;
    -o-transform-origin:@transform;
    -ms-transform-origin:@transform;
    transform-origin:@transform;
    }
    /* 梯度渐变 */
    .getGradient(@type, @color 1 , @color 2 ) {
    background :-moz-linear-gradient(@type, @color 1 , @color 2 ); /*Mozilla*/
    background :-webkit-linear-gradient(@type, @color 1 , @color 2 ); /*new gradient for Webkit*/
    background :-o-linear-gradient(@type, @color 1 , @color 2 ); /*Opera11*/
    background :-ms-linear-gradient(@type, @color 1 , @color 2 ); /*Ie 11+*/
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr= @color 1 ,endcolorstr= @color 2 ,gradientType= 0 ); /*Ie 10-*/
    }

常量：框架

1
2
3
4
5
6
7
8
9
@color 1: #E8B118 ; //菜单颜色
   @color 2: #DC7913 ; //菜单颜色
   @color 3: #CE1131 ; //菜单颜色
   @color 4: #A71955 ; //菜单颜色
   @color 5: #33619F ; //菜单颜色
   @color 6: #149B70 ; //菜单颜色
   @color 7: #79B053 ; //菜单颜色
   @animateTime : 300 ms; //动画时间
   @delay : 50 ms; //延时时间

而后先把html的代码写出来，总共是7个菜单的标签，以及5个区域的标签。less

整个页面的展示形式最终会有五种，分别为 normal left right left right。动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< ul class = "indexMenu" >
< li data-type = "normal" >< span class = "glyphicon glyphicon-home" ></ span >< em class = " rel" >个人主页</ em ></ li >
< li data-type = "left" >< span class = "glyphicon glyphicon-user " ></ span >< em class = " rel" >个人信息</ em ></ li >
< li data-type = "top" >< span class = "glyphicon glyphicon-picture " ></ span >< em class = " rel" >个人相册</ em ></ li >
< li data-type = "right" >< span class = "glyphicon glyphicon-pencil " ></ span >< em class = " rel" >个人随笔</ em ></ li >
< li data-type = "bottom" >< span class = "glyphicon glyphicon-film " ></ span >< em class = " rel" >个人临摹网站</ em ></ li >
< li data-type = "left" >< span class = "glyphicon glyphicon-folder-open " ></ span >< em class = " rel" >个人工做经历</ em ></ li >
< li data-type = "right" >< span class = "glyphicon glyphicon-send " ></ span >< em class = " rel" >个人游戏</ em ></ li >
</ ul >
< section class = "area_main abs ovh" ></ section >
< section class = "area_right abs" ></ section >
< section class = "area_left abs" ></ section >
< section class = "area_top abs" ></ section >
< section class = "area_bottom abs" ></ section >

用到了一些boot的glyphicon标签。大致的结构差很少就是这些代码就够了，下面咱们来构建第一个页面。网站


首先是7个标签的css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.indexMenu{
display:block; width:100%;height:100%; z-index:5;position:absolute;top:0px;left:0px;
.geTtransition(all @animateTime ease);
li {
width:100%;height:14.285%;color:#FFF; cursor:pointer;position:relative;left:0px;top:0px;
em{
line-height:36px;font-size:18px;top:50%;margin-top:-18px;float:right;
.geTtransition(all @animateTime ease );
}
span {
font-size:36px;top:50%;margin-top:-18px;display:block;width:90px !important;text-align:center; float:right;
.geTtransition(all @animateTime ease );
}
}
li:hover{padding-right:40px;}
li:nth-child(1){background:@color1; }
li:nth-child(1):hover{background:lighten(@color1,10%)}
li:nth-child(2){background:@color2;}
li:nth-child(2):hover{background:lighten(@color2,10%);}
li:nth-child(3){background:@color3;}
li:nth-child(3):hover{background:lighten(@color3,10%);}
li:nth-child(4){background:@color4;}
li:nth-child(4):hover{background:lighten(@color4,10%);}
li:nth-child(5){background:@color5;}
li:nth-child(5):hover{background:lighten(@color5,10%);}
li:nth-child(6){background:@color6;}
li:nth-child(6):hover{background:lighten(@color6,10%);}
li:nth-child(7){background:@color7;}
li:nth-child(7):hover{background:lighten(@color7,10%);}
}

而后是全部详细区域的样式：

1
2
3
section{
    width : 100% ; height : 100% ; background : #FFF ; overflow : hidden ;.geTtransition( all @animateTime ease);
    }

area_main 的样式：

1
2
3
4
5
.area_main{
    top : 0px ; left : -100% ; padding-left : 400px ; z-index : 6 ;
    .getBorderRadius( 350px );
    .geTtransition( all @animateTime ease @animateTime);
    }

注意如今的main_area 区域是隐藏在左侧的，因为是有五种形态，可是操做的都是这些标签，因此我把形态的标识放在了body上，好比normal就是 <body class="type_normal"></body>

因此css的样式还有这么一句：

1
2
3
.type_normal{
   .main_area{ left : -400px ;}
   }

这 样整个第一种形态就差很少了。以后咱们须要作的就是切换形态。我把形态的信息用data-type的形式写在了li标签里，这样若是想改的话也很方便。每 次切换形态简单说来就是改变body的class。这样就会改变css样式，咱们加了过渡和形变的样式就会呈现动画效果。这里咱们应用js控制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 主页菜单点击后跳转效果 */
    var menuClickType = {
 
'normal' : function () {}
, 'left' : function () {}
, 'top' : function () {}
 
    , 'right' : function () {}
 
    , 'bottom' : function () {}
}  var $menus = $( '.indexMenu li' );
  $menus
    /* 主页菜单点击动做 */
    .click( function () {
    var $ this = $( this ), type = $ this .data( 'type' ); //获取type 展示形态标识
    menuClickType[type](); //调取相应的方法
    });


这样基本的框架就搭好啦，开始作left的方法，首先咱们先看一下left形态的效果：

 

而后是left形态的跳转效果方法：

css样式： 

1
2
3
4
5
6
7
8
9
10
11
12
.type_left{
    .indexMenu{
    li:hover{
    padding-right : 0px ;
    margin-left : 150px ;
    }
    }
    .area_main{
    .geTtransition( all @animateTime ease);
    }
    .area_left{opacity: 1 ; z-index : auto ;}
    }



js代码： 
1
2
3
4
5
6
$body.removeClass().addClass( 'type_left' );
    $menus.css({
    'left' : '-' + (bodyWidth - 90 ) + 'px'
    , 'top' : '0px'
    , 'height' : bodyHeight/ 7 + 'px'
    });



这 里解释一下，因为有不少东西不能单凭css去控制，也须要js辅助区控制。控制的主要属性为top，left 以及 height，top的控制是之后要用，这里的从normal 转换到left 形态，只是改变了left的值，至于height属性，是因为之后展示的要求，我把菜单的ul的高设成了0。这样它才不会阻挡住屏幕，而其中li的高度自 然就须要手动的去加上去。


然 后在type_left的css中，加入菜单的hover效果（和normal下是不同的）。以及main和left区域的效果，这里咱们须要把 area_left区域展示出来，而且把.area_main区域收起，因为已经去掉了body上 type_normal 的样式，因此area_main区域就自动的缩回左边去了。

最后在加上菜单有顺序的向左移动，好像波浪同样的效果，主要是css3的过渡代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
li:nth-child(1){background:@color1; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 1)}
li:nth-child(1):hover{background:lighten(@color1,10%)}
li:nth-child(2){background:@color2; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 2)}
li:nth-child(2):hover{background:lighten(@color2,10%);}
li:nth-child(3){background:@color3; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 3)}
li:nth-child(3):hover{background:lighten(@color3,10%);}
li:nth-child(4){background:@color4; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 4)}
li:nth-child(4):hover{background:lighten(@color4,10%);}
li:nth-child(5){background:@color5; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 5)}
li:nth-child(5):hover{background:lighten(@color5,10%);}
li:nth-child(6){background:@color6; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 6)}
li:nth-child(6):hover{background:lighten(@color6,10%);}
li:nth-child(7){background:@color7; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 7)}
li:nth-child(7):hover{background:lighten(@color7,10%);}



把以前的li标签的css样式增长一些东西，这里就是增长了过渡，给left属性的过渡增长延时，标签index越大，延时就越多，这样就能够作出主页中的动画效果啦。

animateTime 和 delay 都是上面设置的常量。

固然咱们还要从left能回到 normal 形态上。因此 normal的js代码是

1
2
3
4
5
6
$body.removeClass().addClass( 'type_normal' );
$menus.css({
'left' : '0px'
, 'top' : '0px'
, 'height' : bodyHeight/7 + 'px'
});



这样，从normal 形态 到left 形态的效果就作好了。就是演示中第一个按钮个人主页以及第二个按钮个人信息的点击效果。


 以后来看第三个形态——right形态的效果：

这个菜单是没有动的，只是相对应的区域（section）从左侧滑了出来，因此这个是很好作的。

css样式：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.area_right{
z-index : 6 ; overflow : hidden ; top : 0px ; left : -100% ; padding-left : 90px ;
}
.type_right{
.indexMenu{
li{ left : 0px ;}
}
.area_main{
.geTtransition( all @animateTime ease);
}
.area_right{
left : -90px ;
.geTtransition( all @animateTime ease @animateTime);
}
.indexMenu{
li:hover{
padding-right : 0px ;
span{
.getAnimate(animate_menu @animateTime ease);
}
}
}
}



js代码： 
1
2
3
4
5
6
$body.removeClass().addClass( 'type_right' );
    $menus.css({
    'left' : '0px'
    , 'top' : '0px'
    , 'height' : bodyHeight/7 + 'px'
    });



值 得注意的一点事，这三种形态的css代码中，都有area_main的样式，可是只有一句过渡的，不一样的地方时有的有延时，有的没有，这个是考虑 normal形态和right形态切换的时候，其实就area_main向左收回，area_right向右展开，若是同时进行，很不友好，因此呢，就加 了这个延时。具体的逻辑你们试一下就知道啦。

 而后是top和bottom。这两个实际上是一回事，只不过一个在上一个在下，只挑一个top说一下便可。

top形态：

bottom形态：

这个是把整个菜单标签的结构都给换了，之前是 width:100%; height:100%/7。 如今是 反过来了，因此每次作变化以前，都须要把标签所有移动到上方（或者下方）的屏幕外，而后作变化，再显示出来。具体动画效果请参考演示。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.type_top_end{
   .indexMenu{
   height : 100% ;
   top : -100% ;
   }
   .main_area{
   .geTtransition( all @animateTime ease);
   }
   }
   .type_top{
   .indexMenu{
   height : 100% ;
   top : -100% ;
   li {
   height : 100% !important ; width : 14.285% ; float : left ; left : 0px ; overflow : hidden ;
   .geTtransition 3 ( all 0 s ease, top @animateTime ease, background @animateTime ease);
   em{
   position : absolute ; bottom : 5px ; top : auto ; width : 100% ; text-align : center ;opacity: 0 ;
   .getTransform(scale( 2 ));
   }
   span {
   top : 100% ; margin-top : -40px ; float : none ; left : 50% ; margin-left : -45px ;.getTransform(scale( 1 ));
   }
   }
   li:hover{
   padding-right : 0px ;
   span{
   opacity: 0 ;
   .getTransform(scale( 2 ));
   }
   em{
   opacity: 1 ;
   .getTransform(scale( 1 ));
   }
   }
   }
   .area_top{opacity: 1 ; z-index : auto ;}
   }



这里有两个css样式，type_top_end是最终的显示结果，type_top能够当作是变形的过程，这个设计有一些蹩脚，当时没有设计好。

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
$body.removeClass().addClass('type_top_end' );
    $menus.css({
    'left':'0px'
    ,'top' : '0px'
    });
    setTimeout(function () {
    $body.addClass('type_top' );
    $menus.css({
    'left':'0px'
    ,'top' : '43px'
    });
    } , animateTime);



 先收到最上面去，而后setTImeout中 改变top的值，让其在下来一部分。组成所见的标签。

这样，基本的效果就出现了，不过仍是有一点的欠缺，具体说来：

第一，从top或者bottom效果便到别的效果时，动画显的很混乱；

第二，从top效果换到bottom效果时，也很乱；

第三，因为只有五种展示形式，不过内容却有七个，因此left和right是重复的两个，那么当从一个left跳转到另外一个left（如演示中第二个标签——个人信息跳转到第六个标签——个人工做经历）时，也须要从新设定动画。

为了解决这三个问题，咱们先作一个限定，再次点击同一个标签，是要屏蔽掉的。代码以下： $menus /* 主页菜单点击动做 */ .click(function () { var $this = $(this), type = $this.data('type'), target = $this.data('target') , $area = $('.area_'+ type),flag = $area.data('flag') ? $area.data('flag') : ''; if($body.hasClass('type_'+ type) && flag == target) return; menuClickType[type](); //调取相应的方法 });

这个屏蔽有两个判断，第二个判断是加内容时候须要的，咱们如今只看第一个便可。

其次是解决第一个问题，即对top以及bottom形态的修正。咱们写一个方法：

1
2
3
4
5
6
7
8
9
10
11
/* type_top type_bottom 修正 */
     function amend_top_bottom () {
         if ($body.hasClass( 'type_top' ) || $body.hasClass( 'type_bottom' )){
             $menus.css({
                 'left' : '0px'
                 , 'top' : '0px'
             });
             return animateTime;
         }
         return 0;
     }

然 后在别的click点击事件中，调用这个方法，获取一个数值，即延时，而后把以后的执行放到一个setTimeOut里，延时即这个数值。当点击时当前的 形态不是top或bottom时，返回0，即立刻运行，当是这两种形态时，即先把露出的菜单缩会，而后给一个animateTime的延时，这段延时后在 走点击事件的方法，便可。

第二个问题。只要在top 和bottom 的点击事件中 加一下是否当前形态为彼此的另外一个便可，代码为：

1
2
3
4
5
6
7
8
9
if ($body.hasClass( 'type_bottom' )){
     $body.addClass( 'type_top' ).addClass( 'type_top_end' ).removeClass( 'type_bottom' ).removeClass( 'type_bottom_end' );
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程