超漂亮的前臺頁面模板——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教程