├── favicon.ico ├── images ├── icon │ ├── qq.png │ ├── blog.png │ ├── email.png │ ├── weibo.png │ ├── zhihu.png │ ├── dingding.png │ ├── facebook.png │ ├── github.png │ ├── google.png │ ├── twitter.png │ ├── weixin.png │ ├── arrowhead.png │ ├── arrowleft.png │ ├── arrowright.png │ ├── github_white.png │ ├── cycle.svg │ ├── green_cycle.svg │ ├── yellow_cycle.svg │ └── blue_cycle.svg └── upload │ ├── acg.png │ ├── qq.png │ ├── head.jpg │ ├── head1.jpg │ ├── kapok.jpg │ ├── pic_1.jpg │ ├── pic_10.jpg │ ├── pic_2.jpg │ ├── pic_3.jpg │ ├── pic_4.jpg │ ├── wechat.png │ ├── dingding.png │ └── reading.jpg ├── css ├── process.css └── main.css ├── js └── main.js └── index.html /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/favicon.ico -------------------------------------------------------------------------------- /images/icon/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/qq.png -------------------------------------------------------------------------------- /images/icon/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/blog.png -------------------------------------------------------------------------------- /images/icon/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/email.png -------------------------------------------------------------------------------- /images/icon/weibo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/weibo.png -------------------------------------------------------------------------------- /images/icon/zhihu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/zhihu.png -------------------------------------------------------------------------------- /images/upload/acg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/acg.png -------------------------------------------------------------------------------- /images/upload/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/qq.png -------------------------------------------------------------------------------- /images/icon/dingding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/dingding.png -------------------------------------------------------------------------------- /images/icon/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/facebook.png -------------------------------------------------------------------------------- /images/icon/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/github.png -------------------------------------------------------------------------------- /images/icon/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/google.png -------------------------------------------------------------------------------- /images/icon/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/twitter.png -------------------------------------------------------------------------------- /images/icon/weixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/weixin.png -------------------------------------------------------------------------------- /images/upload/head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/head.jpg -------------------------------------------------------------------------------- /images/upload/head1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/head1.jpg -------------------------------------------------------------------------------- /images/upload/kapok.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/kapok.jpg -------------------------------------------------------------------------------- /images/upload/pic_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/pic_1.jpg -------------------------------------------------------------------------------- /images/upload/pic_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/pic_10.jpg -------------------------------------------------------------------------------- /images/upload/pic_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/pic_2.jpg -------------------------------------------------------------------------------- /images/upload/pic_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/pic_3.jpg -------------------------------------------------------------------------------- /images/upload/pic_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/pic_4.jpg -------------------------------------------------------------------------------- /images/upload/wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/wechat.png -------------------------------------------------------------------------------- /images/icon/arrowhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/arrowhead.png -------------------------------------------------------------------------------- /images/icon/arrowleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/arrowleft.png -------------------------------------------------------------------------------- /images/icon/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/arrowright.png -------------------------------------------------------------------------------- /images/upload/dingding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/dingding.png -------------------------------------------------------------------------------- /images/upload/reading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/upload/reading.jpg -------------------------------------------------------------------------------- /images/icon/github_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wujunze/AlphaGooo.github.io/master/images/icon/github_white.png -------------------------------------------------------------------------------- /images/icon/cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /images/icon/green_cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /images/icon/yellow_cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /images/icon/blue_cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /css/process.css: -------------------------------------------------------------------------------- 1 | #bar_container{ 2 | float: left; 3 | color: #ffffff; 4 | width: 50%; 5 | } 6 | 7 | #box02_text{ 8 | float: left; 9 | } 10 | 11 | .bar { 12 | height: 40px; 13 | width: 0; 14 | transition: width 1.2s ease-in-out; 15 | -webkit-transition: width 1.2s ease-in-out; 16 | -moz-transition: width 1.2s ease-in-out; 17 | -ms-transition: width 1.2s ease-in-out; 18 | position: relative; 19 | margin: 30px 0; 20 | border-radius: 4px; 21 | } 22 | 23 | .bar.mint { 24 | background-color: #14c3a2; 25 | background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px); 26 | background-size: 600px 100%; 27 | animation: barberpole 12s linear infinite; 28 | -webkit-animation: barberpole 12s linear infinite; 29 | -moz-animation: barberpole 12s linear infinite; 30 | -o-animation: barberpole 12s linear infinite; 31 | -ms-accelerator: barberpole 12s linear infinite; 32 | border-bottom: 5px solid #0d7e68; 33 | } 34 | 35 | .bar.red { 36 | background-color: #cf4647; 37 | background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px); 38 | background-size: 600px 100%; 39 | animation: barberpole 12s linear infinite; 40 | -webkit-animation: barberpole 12s linear infinite; 41 | -moz-animation: barberpole 12s linear infinite; 42 | -o-animation: barberpole 12s linear infinite; 43 | -ms-accelerator: barberpole 12s linear infinite; 44 | border-bottom: 5px solid #9f292a; 45 | } 46 | 47 | .bar.orange { 48 | background-color: #eb7b59; 49 | background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px); 50 | background-size: 600px 100%; 51 | animation: barberpole 12s linear infinite; 52 | -webkit-animation: barberpole 12s linear infinite; 53 | -moz-animation: barberpole 12s linear infinite; 54 | -o-animation: barberpole 12s linear infinite; 55 | -ms-accelerator: barberpole 12s linear infinite; 56 | border-bottom: 5px solid #dd481b; 57 | } 58 | 59 | .bar.lila { 60 | background-color: #524656; 61 | background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px); 62 | background-size: 600px 100%; 63 | animation: barberpole 12s linear infinite; 64 | -webkit-animation: barberpole 12s linear infinite; 65 | -moz-animation: barberpole 12s linear infinite; 66 | -ms-accelerator: barberpole 12s linear infinite; 67 | -o-animation: barberpole 12s linear infinite; 68 | border-bottom: 5px solid #2a242c; 69 | } 70 | 71 | .bar.gray { 72 | background-color: #595b5a; 73 | background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px); 74 | background-size: 600px 100%; 75 | animation: barberpole 12s linear infinite; 76 | -webkit-animation: barberpole 12s linear infinite; 77 | -moz-animation: barberpole 12s linear infinite; 78 | -ms-accelerator: barberpole 12s linear infinite; 79 | -o-animation: barberpole 12s linear infinite; 80 | border-bottom: 5px solid #333434; 81 | } 82 | 83 | .bar.blue { 84 | background-color: blueviolet; 85 | background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px); 86 | background-size: 600px 100%; 87 | animation: barberpole 12s linear infinite; 88 | -webkit-animation: barberpole 12s linear infinite; 89 | -moz-animation: barberpole 12s linear infinite; 90 | -o-animation: barberpole 12s linear infinite; 91 | -ms-accelerator: barberpole 12s linear infinite; 92 | border-bottom: 5px solid #333434; 93 | } 94 | 95 | .bar.green { 96 | background-color: green; 97 | background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px); 98 | background-size: 600px 100%; 99 | animation: barberpole 12s linear infinite; 100 | -webkit-animation: barberpole 12s linear infinite; 101 | -moz-animation: barberpole 12s linear infinite; 102 | -o-animation: barberpole 12s linear infinite; 103 | -ms-accelerator: barberpole 12s linear infinite; 104 | border-bottom: 5px solid #dd481b; 105 | } 106 | 107 | .bar.active:after, .bar.active:before { 108 | opacity: 1; 109 | font-size: 16px; 110 | } 111 | 112 | .bar:before { 113 | content: attr(data-skill); 114 | display: block; 115 | position: absolute; 116 | top: 0; 117 | left: 0; 118 | padding: 10px; 119 | height: 40px; 120 | font-style: italic; 121 | opacity: 0; 122 | transition: opacity 2s 0.6s; 123 | -webkit-transition: opacity 2s 0.6s; 124 | -moz-transition: opacity 2s 0.6s; 125 | -ms-transition: opacity 2s 0.6s; 126 | -o-animation: opacity 2s 0.6s; 127 | } 128 | 129 | .bar:after { 130 | content: attr(data-percent) "%"; 131 | display: block; 132 | position: absolute; 133 | top: 0; 134 | right: 0; 135 | height: 40px; 136 | padding: 10px; 137 | opacity: 0; 138 | transition: opacity 2s 0.6s; 139 | -webkit-transition: opacity 2s 0.6s; 140 | -moz-transition: opacity 2s 0.6s; 141 | -ms-transition: opacity 2s 0.6s; 142 | -o-animation: opacity 2s 0.6s; 143 | } 144 | 145 | @keyframes barberpole { 146 | from { 147 | background-position: 0% 0%; 148 | } 149 | 150 | to { 151 | background-position: 600px 0%; 152 | } 153 | } 154 | 155 | @-webkit-keyframes barberpole { 156 | from { 157 | background-position: 0% 0%; 158 | } 159 | 160 | to { 161 | background-position: 600px 0%; 162 | } 163 | } 164 | 165 | @-moz-keyframes barberpole { 166 | from { 167 | background-position: 0% 0%; 168 | } 169 | 170 | to { 171 | background-position: 600px 0%; 172 | } 173 | } 174 | 175 | @-ms-keyframes barberpole { 176 | from { 177 | background-position: 0% 0%; 178 | } 179 | 180 | to { 181 | background-position: 600px 0%; 182 | } 183 | } 184 | 185 | @-o-keyframes barberpole { 186 | from { 187 | background-position: 0% 0%; 188 | } 189 | 190 | to { 191 | background-position: 600px 0%; 192 | } 193 | } 194 | 195 | .bar.active[data-percent="5"] { 196 | width: 5%; 197 | } 198 | 199 | .bar.active[data-percent="10"] { 200 | width: 10%; 201 | } 202 | 203 | .bar.active[data-percent="15"] { 204 | width: 15%; 205 | } 206 | 207 | .bar.active[data-percent="20"] { 208 | width: 20%; 209 | } 210 | 211 | .bar.active[data-percent="25"] { 212 | width: 25%; 213 | } 214 | 215 | .bar.active[data-percent="30"] { 216 | width: 30%; 217 | } 218 | 219 | .bar.active[data-percent="35"] { 220 | width: 35%; 221 | } 222 | 223 | .bar.active[data-percent="40"] { 224 | width: 40%; 225 | } 226 | 227 | .bar.active[data-percent="45"] { 228 | width: 45%; 229 | } 230 | 231 | .bar.active[data-percent="50"] { 232 | width: 50%; 233 | } 234 | 235 | .bar.active[data-percent="55"] { 236 | width: 55%; 237 | } 238 | 239 | .bar.active[data-percent="60"] { 240 | width: 60%; 241 | } 242 | 243 | .bar.active[data-percent="65"] { 244 | width: 65%; 245 | } 246 | 247 | .bar.active[data-percent="70"] { 248 | width: 70%; 249 | } 250 | 251 | .bar.active[data-percent="75"] { 252 | width: 75%; 253 | } 254 | 255 | .bar.active[data-percent="80"] { 256 | width: 80%; 257 | } 258 | 259 | .bar.active[data-percent="85"] { 260 | width: 85%; 261 | } 262 | 263 | .bar.active[data-percent="90"] { 264 | width: 90%; 265 | } 266 | 267 | .bar.active[data-percent="95"] { 268 | width: 95%; 269 | } 270 | 271 | .bar.active[data-percent="100"] { 272 | width: 100%; 273 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var h = window.innerHeight; 3 | var w = window.innerWidth; 4 | 5 | var bg = document.getElementsByClassName("box_bg"); 6 | 7 | if((w/h) >= (1920/1080)){ 8 | for(var i = 0;i < bg.length; i++){ 9 | bg[i].style.width = w + 'px'; 10 | bg[i].style.height = w * (1080/1920) + 'px'; 11 | bg[i].style.top = -(w * (1080/1920) - h)/2 + 'px'; 12 | bg[i].style.left = '0'; 13 | } 14 | } 15 | else{ 16 | for(var i = 0; i < bg.length; i++){ 17 | bg[i].style.height = h + 'px'; 18 | bg[i].style.width = h*(1920/1080) + 'px'; 19 | bg[i].style.left = -(h*(1920/1080) - w)/2 + 'px'; 20 | bg[i].style.top = '0'; 21 | } 22 | } 23 | 24 | var box01_index = 0; 25 | var box01_p = document.getElementById('box01_text').children; 26 | function boxOne() { 27 | if(box01_index >=0 && box01_index <= 2){ 28 | box01_p[box01_index].style.opacity = '1'; 29 | box01_index ++; 30 | } 31 | else{ 32 | clearInterval(boxOneTimer); 33 | } 34 | } 35 | 36 | var x_arr = new Array(); 37 | var y_arr = new Array(); 38 | var x = y = m =0; 39 | for(var i = 0; i < 800; i++){ 40 | if(i >= 400){ 41 | x = m; 42 | y = 200 + Math.sqrt(40000 - Math.pow(x-200,2)); 43 | m--; 44 | } 45 | else{ 46 | x = m; 47 | y = 200 - Math.sqrt(40000 - Math.pow(x-200,2)); 48 | m++; 49 | } 50 | x_arr[i] = x - 60; 51 | y_arr[i] = parseInt(y) - 25; 52 | } 53 | 54 | /* 55 | *原型轨迹 56 | */ 57 | var gitMove = document.getElementById('github_a'); 58 | var weiboMove = document.getElementById('weibo_a') 59 | var blogMove = document.getElementById('blog_a') 60 | var g_num = 0; 61 | var w_num = 0; 62 | var b_num = 0; 63 | function movegit(){ 64 | if(g_num <= 750){ 65 | // gitMove.css({"left":x_arr[g_num] + "px","top":y_arr[g_num]+"px"}); 66 | gitMove.style.left = x_arr[g_num] + 'px'; 67 | gitMove.style.top = y_arr[g_num] + 'px'; 68 | g_num += 3; 69 | } 70 | else{ 71 | clearInterval(gitTimer); 72 | } 73 | } 74 | 75 | function moveweibo(){ 76 | if(w_num <= 400){ 77 | // weiboMove.css({"left":x_arr[w_num]+"px","top":y_arr[w_num]}); 78 | weiboMove.style.left = x_arr[w_num] + 'px'; 79 | weiboMove.style.top = y_arr[w_num] + 'px'; 80 | w_num += 3; 81 | } 82 | else{ 83 | clearInterval(weiTimer); 84 | } 85 | } 86 | 87 | function moveblog(){ 88 | if(b_num <= 90){ 89 | // blogMove.css({"left":x_arr[b_num]+"px","top":y_arr[b_num]}); 90 | blogMove.style.left = x_arr[b_num] + 'px'; 91 | blogMove.style.top = y_arr[b_num] + 'px'; 92 | b_num += 3; 93 | } 94 | else{ 95 | clearInterval(blogTimer); 96 | } 97 | } 98 | 99 | movegit(); 100 | var gitTimer=setInterval(movegit,1); 101 | moveweibo(); 102 | var weiTimer=setInterval(moveweibo,1); 103 | moveblog(); 104 | var blogTimer=setInterval(moveblog,1); 105 | 106 | //第一屏文字加载 107 | var boxOneTimer = setInterval(boxOne,800); 108 | })(); 109 | 110 | var f_btn = document.getElementById("float_btn").children; 111 | var nav_ul = document.getElementById('nav_ul').children; 112 | var wrapBox = document.getElementById("wrapBox"); 113 | var foot = document.getElementById("foot"); 114 | var arrow = document.getElementsByClassName("arrow_img"); 115 | var bg = document.getElementsByClassName("box_bg"); 116 | var boxs = document.getElementsByClassName("box"); 117 | var indexs = 0; 118 | var process = document.getElementById('bar_container').children;//进度条 119 | var box02_flag = false; //还未曾到第二屏 120 | var box02_text = document.getElementById('box02_text').children; //第二屏文字 121 | var box02_index = 0; 122 | var box02_timer; 123 | 124 | 125 | function hasClass(obj, cls) { 126 | return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 127 | } 128 | 129 | function addActive() { 130 | for(var i = 0; i < process.length ; i++){ 131 | if(!hasClass(process[i],'active')){ 132 | process[i].className += ' active'; 133 | } 134 | } 135 | } 136 | 137 | //第二屏动画 138 | function boxTow() { 139 | if(box02_index >= 0 && box02_index < box02_text.length){ 140 | box02_text[box02_index].style.right = '0'; 141 | box02_index++; 142 | } 143 | else{ 144 | clearInterval(box02_timer); 145 | } 146 | } 147 | 148 | //滚动函数 149 | function divMove(obj,overHeight,num){ 150 | if(obj.offsetTop >= overHeight){ 151 | //向下滚动 152 | var timer; 153 | timer = setInterval(function(){ 154 | if((obj.offsetTop - overHeight) <= num && (obj.offsetTop - overHeight) > 0){ 155 | obj.style.top = overHeight + 'px'; 156 | clearInterval(timer); 157 | } 158 | else if((obj.offsetTop - overHeight) > num){ 159 | obj.style.top = obj.offsetTop - num + 'px'; 160 | } 161 | /* else{ 162 | //停止滚动 163 | //obj.style.top = obj.offsetTop - num + 'px'; 164 | clearInterval(timer); 165 | }*/ 166 | },10); 167 | } 168 | else if(obj.offsetTop < overHeight){ 169 | //向上滚动 170 | var timer; 171 | timer = setInterval(function(){ 172 | if((overHeight - obj.offsetTop ) <= num && (overHeight - obj.offsetTop) > 0){ 173 | //最后定位 174 | obj.style.top = overHeight + 'px'; 175 | clearInterval(timer); 176 | } 177 | else if((overHeight - obj.offsetTop) > num){ 178 | //继续滚动 179 | obj.style.top = obj.offsetTop + num +'px'; 180 | } 181 | /* else{ 182 | //停止滚动 183 | clearInterval(timer); 184 | }*/ 185 | },10); 186 | } 187 | } 188 | 189 | function btnChange(index,flag,speed){ 190 | var height = window.innerHeight; 191 | var fh = foot.offsetHeight; 192 | for(var n=0; n0 && index <=3){ 209 | f_btn[index].style.background = "#ffffff"; 210 | //wrapBox.style.top = (-height * indexs) +"px"; 211 | nav_ul[index].style.color = 'red'; 212 | divMove(wrapBox,-(height * indexs),20*speed); 213 | } 214 | else if(index == 4){ 215 | indexs = 4; 216 | //wrapBox.style.top = (-height * 3 - fh) +"px"; 217 | divMove(wrapBox,(-height * 3 - fh),20*speed); 218 | nav_ul[index].style.color = 'red'; 219 | } 220 | else{ 221 | indexs = 4; 222 | } 223 | } 224 | else{ 225 | if(index <= 0 ){ 226 | indexs = 0; 227 | f_btn[0].style.background = "#ffffff"; 228 | nav_ul[0].style.color = 'red'; 229 | wrapBox.style.top = "0"; 230 | } 231 | else if(index >0 && index <=3){ 232 | f_btn[index].style.background = "#ffffff"; 233 | nav_ul[index].style.color = 'red'; 234 | wrapBox.style.top = (-height * indexs) +"px"; 235 | } 236 | else if(index == 4){ 237 | indexs = 4; 238 | wrapBox.style.top = (-height * 3 - fh) +"px"; 239 | nav_ul[index].style.color = 'red'; 240 | } 241 | else{ 242 | indexs = 4; 243 | } 244 | } 245 | if(indexs == 1 && !box02_flag){ 246 | box02_flag = true; 247 | } 248 | if(box02_flag){ 249 | //第二屏动画 250 | var timer = setTimeout(addActive,1000); 251 | box02_timer = setInterval(boxTow,500); 252 | } 253 | } 254 | 255 | 256 | 257 | 258 | //浮动点击事件 259 | for(var i = 0; i < f_btn.length;i++){ 260 | f_btn[i].indexs = i; 261 | f_btn[i].onclick = function(){ 262 | var speed = Math.abs(indexs - this.indexs); 263 | indexs = this.indexs; 264 | btnChange(indexs,true,speed); 265 | } 266 | } 267 | 268 | //浮动nav事件 269 | for(var i = 0; i < nav_ul.length;i++){ 270 | nav_ul[i].indexs = i; 271 | nav_ul[i].onclick = function(){ 272 | var speed = Math.abs(indexs - this.indexs); 273 | indexs = this.indexs; 274 | btnChange(indexs,true,speed); 275 | } 276 | } 277 | 278 | 279 | //箭头点击事件 280 | for(var i = 0; i < arrow.length; i++){ 281 | arrow[i].indexs = i; 282 | arrow[i].onclick = function(){ 283 | indexs = this.indexs + 1; 284 | btnChange(indexs,true,1); 285 | } 286 | } 287 | 288 | var oB = true; 289 | 290 | //鼠标滑动事件 291 | var scrollFunc=function(e){ 292 | var direct=0; 293 | e=e || window.event; 294 | if(e.wheelDelta){ //IE/Opera/Chrome 295 | if(oB == true) { 296 | //向下滑动 297 | if(e.wheelDelta >=120 ){ 298 | oB = false; 299 | indexs--; 300 | btnChange(indexs,true,1); 301 | setTimeout(function(){ 302 | oB = true; 303 | },700); 304 | 305 | }else if(e.wheelDelta <= -120){ 306 | oB = false; 307 | //向上滑动 308 | indexs++; 309 | btnChange(indexs,true,1); 310 | setTimeout(function(){ 311 | oB=true; 312 | },700); 313 | } 314 | } 315 | 316 | }else if(e.detail){//Firefox 317 | if(oB){ 318 | if(e.detail >= 3){ 319 | oB = false; 320 | indexs++; 321 | btnChange(indexs,true,1); 322 | setTimeout(function(){ 323 | oB = true; 324 | },700); 325 | console.log('ss'); 326 | } 327 | else if(e.detail <= -3){ 328 | oB = false; 329 | indexs--; 330 | btnChange(indexs,true,1); 331 | setTimeout(function(){oB = true;},700); 332 | } 333 | } 334 | } 335 | } 336 | 337 | 338 | 339 | 340 | /*注册事件*/ 341 | if(document.addEventListener){ 342 | document.addEventListener('DOMMouseScroll',scrollFunc,false);//W3C 343 | } 344 | window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari 345 | 346 | 347 | var iB = true; 348 | //监听窗口改变 349 | window.onresize = function(){ 350 | document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20 + 'px'; 351 | var h = window.innerHeight; 352 | var w = window.innerWidth; 353 | if(w/h >= 1920/1080){ 354 | iB = true; 355 | imgChange(iB); 356 | btnChange(indexs); 357 | 358 | } 359 | else{ 360 | iB = false; 361 | imgChange(iB); 362 | btnChange(indexs,false); 363 | } 364 | } 365 | 366 | function imgChange(iB){ 367 | var h = window.innerHeight; 368 | var w = window.innerWidth; 369 | if(iB){ 370 | for(var i = 0;i < bg.length; i++){ 371 | bg[i].style.width = w + 'px'; 372 | bg[i].style.height = w * (1080/1920) + 'px'; 373 | bg[i].style.top = -(w * (1080/1920) - h)/2 + 'px'; 374 | boxs[i].style.width = w + 'px'; 375 | boxs[i].style.height = h + 'px'; 376 | bg[i].style.left = '0'; 377 | } 378 | } 379 | else{ 380 | for(var i = 0; i < bg.length; i++){ 381 | bg[i].style.height = h + 'px'; 382 | bg[i].style.width = h*(1920/1080) + 'px'; 383 | bg[i].style.left = -(h*(1920/1080) - w)/2 + 'px'; 384 | boxs[i].style.width = w + 'px'; 385 | boxs[i].style.height = h + 'px'; 386 | bg[i].style.top = '0'; 387 | } 388 | 389 | } 390 | } 391 | 392 | var e_li = document.getElementById('timeUl').children; 393 | var li_times = 0; 394 | var left_div = document.getElementById('left_div'); 395 | var right_div = document.getElementById('right_div'); 396 | left_div.onclick = function () { 397 | if(li_times == 0){ 398 | li_times = 0; 399 | } 400 | else{ 401 | document.getElementById('timeUl').style.left = document.getElementById('timeUl').offsetLeft + e_li[0].offsetWidth + 'px'; 402 | li_times--; 403 | } 404 | } 405 | 406 | right_div.onclick = function () { 407 | if(li_times == (e_li.length-2)){ 408 | li_times == e_li.length - 2; 409 | } 410 | else{ 411 | document.getElementById('timeUl').style.left = document.getElementById('timeUl').offsetLeft - e_li[0].offsetWidth +'px'; 412 | li_times++; 413 | } 414 | } 415 | 416 | //手势事件 417 | var startY,endY; 418 | window.addEventListener('touchstart', touchStart,false); 419 | window.addEventListener('touchmove', touchMove,false); 420 | window.addEventListener('touchend', touchEnd,false); 421 | 422 | function touchStart(event){ 423 | // var touch = event.originalEvent.targetTouches[0]; 424 | // startY = touch.pageY; 425 | startY = event.touches[0].clientY; 426 | } 427 | 428 | function touchMove(event){ 429 | // var touch = event.originalEvent.changedTouches[0]; 430 | // endY = touch.pageY; 431 | endY= event.touches[0].clientY; 432 | } 433 | 434 | function touchEnd(event){ 435 | if(endY - startY > 100){ 436 | //向上滑动 437 | indexs = this.indexs - 1; 438 | btnChange(indexs,true,1); 439 | } 440 | else if(startY - endY > 100){ 441 | //向下滑动 442 | indexs = this.indexs + 1; 443 | btnChange(indexs,true,1); 444 | } 445 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Yeah . It's AlphaGooo... 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 | 43 |
44 |
45 |
46 | 47 | 48 | 49 | 55 | 56 | 57 | 58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 |

GitHub

 67 | 68 | 69 | 70 |

微博

 71 | 72 | 73 | 74 |

关于我

 75 | 76 | 77 |
78 | 79 |
80 | 81 |
82 | 83 |
84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |

AlphaGooo

92 |

Never say no    never give up.

93 |
94 |

Now, just be a PHP Junior Development Engineer.

95 |
96 |
97 |
98 | 99 |
100 |
101 | 102 | 103 | 104 |
105 | 106 | 107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |

成长经历

119 |
120 |

2012.10,初次接触的编程语言是C/C++,在拥挤的实验室

121 |

2013.07,开始学习PHP,从此坚定了要成为PHPer的觉悟

122 |

2013.10,初次接触Java，只是觉得有趣，但是没有深入

123 |

2014.04,接触到第一个的PHP开发框架：ThinkPHP

124 |

2014.08,接触到另外一个PHP框架Template Blize

125 |

2014.12,学习Nginx服务器和MongoDB的安装配置

126 |

2015.03,学习JavaScript和Css等前端开发以及调试

127 |

2015.06,开始学习Linux服务器搭建以及相关基本配置

128 |

2015.08,开始学习Github、Git的使用以及分布式开发

129 |

2016.04,开始深入学习微信公众平台开发以及运营策略

130 |

目前正在学习Yii2以及Vagrant实现开发环境打包一体化技术

131 |

而未来...我想成为一名全栈工程师

132 |
133 |
134 |
135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 | 143 | 144 |
145 | 146 | 147 |
148 |
    149 |
  • 150 |
    151 |

    2011-2015

    152 |

    广东石油化工学院

    153 |

    专业：信息与计算科学

    154 |

    在风气不佳的考试战场中险些挂科(poi~)

    155 |

    最喜欢的科目是LOL

    156 |

    立志要成为PHP大神的男人

    157 |
    158 |
    • 159 |
  • 160 |
    161 |

    2015.8 - 2016.4

    162 |

    广州职友集网络技术有限公司

    163 |

    PHP开发程序员

    164 |

    深化了自己PHP编程的技术能力和理解

    165 |

    前途多艰

    166 |
    167 |
    • 168 |
  • 169 |
    170 |

    2016.4 - Now

    171 |

    广州车宝网络技术有限公司

    172 |

    PHP初级开发工程师

    173 |

    世界那么大，我想去看看

    174 |

    希望在不同的团队下获得更多成长

    175 |
    176 |
    • 177 |
  • 178 |
    179 |

    Now - Future

    180 |

    不断自我反省，不断专研打磨自己的技术

    181 |

    不断尝试各种新技术，跟上时代的步伐

    182 |

    拿着菜刀砍电线，一路火花带闪电

    183 |

    不留遗憾

    184 |
    185 |
    • 186 |
187 |
188 | 189 |
190 |
191 | 192 |
193 |
194 | 195 |
196 | 197 |
198 |
199 | 200 | 201 | 202 |
203 | 204 |
205 |

爱好兴趣

206 |
    207 |
  • 208 |
    209 | 210 |
    211 | 212 |
    213 |
    214 |

    运动

    215 |

    恒大&NBA

    216 |
    217 |
    218 |
    219 |
    220 |

    运动/恒大&NBA

    221 |
    222 |

    223 | 对于运动我丝毫没有抵抗力，对于足球我对广州恒大是死忠球迷，对于NBA我是姚明的忠实粉丝。 224 |

    225 |

    226 | 我擅长篮球和足球，会打羽毛球，乒乓球，排球和桌球。 227 |

    228 |
    229 |
    • 230 |
  • 231 |
    232 | 233 |
    234 | 235 |
    236 |
    237 |

    文艺

    238 |

    看书&看电影&听音乐

    239 |
    240 |
    241 |
    242 |
    243 |

    文艺/看书&看电影&听音乐

    244 |
    245 |

    246 | 我喜欢看韩寒和郭敬明的书，喜欢看搞笑或者大型魔幻科幻电影，喜欢听节奏感强旋律优美的音乐。 247 |

    248 |

    249 | 在文艺方面，我比较擅长写作，抒情散文是我的强项。 250 |

    251 |
    252 |
    • 253 |
  • 254 |
    255 | 256 |
    257 | 258 |
    259 |
    260 |

    社交

    261 |

    QQ&Weibo&WeChat

    262 |
    263 |
    264 |
    265 |
    266 |

    社交/QQ&Weibo&WeChat

    267 |
    268 |

    269 | QQ主要用来工作和学习上保持联系，Weibo主要是分享自己心情和寻找好玩的，WeChat才是我的社交世界。 270 |

    271 |

    272 | 我是一个不擅长表达的人，我更愿意用文字表达。 273 |

    274 |
    275 |
    • 276 |
    277 |
278 |
279 |
280 | 281 |
282 |
283 | 284 | 285 |

社交圈子

286 |
287 | 320 |
321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 |
334 |
335 |
336 |

|  我的个人作品 - 传送门  |

337 |

338 | 读读博客  |   339 | 听听音乐  |   340 | 看看视频  |   341 | 玩玩游戏  |   342 | 资讯平台  |   343 | 论坛空间  |   344 | 资源下载 345 |

346 |

All content designed by @Rongx © 2015-2016 • All rights reserved.

347 |

Rongx.GitHub

348 |
349 | 350 |
351 | 352 | 356 | 360 | 361 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | *{ 3 | margin:0; 4 | padding:0; 5 | list-style-type:none; 6 | font-family: 'Microsoft Yahei', '宋体', arial, 'Hiragino Sans GB', Helvetica; 7 | } 8 | 9 | label{ 10 | cursor:pointer; 11 | } 12 | 13 | img{ 14 | vertical-align:middle; 15 | } 16 | 17 | table{ 18 | empty-cells:show; 19 | border-collapse:collapse; 20 | border-spacing:0; 21 | } 22 | 23 | abbr,acronym{ 24 | border:0; 25 | font-variant:normal; 26 | } 27 | 28 | address,caption,cite,code,dfn,em,th,var,optgroup{ 29 | font-style:normal; 30 | font-weight:normal; 31 | } 32 | 33 | input,button,textarea,select,optgroup,option{ 34 | font-family:inherit; 35 | font-size:inherit; 36 | font-style:inherit; 37 | font-weight:inherit; 38 | } 39 | 40 | input,button,textarea,select{ 41 | *font-size:100%; 42 | } 43 | 44 | a,img{ 45 | border:0; 46 | } 47 | 48 | a,a:visited,a:hover{ 49 | color:#5e5e5e; 50 | text-decoration:none; 51 | } 52 | 53 | .clear{ 54 | clear: both; 55 | } 56 | 57 | /*main*/ 58 | body{ 59 | background-color: #ffffff; 60 | width: 100%; 61 | } 62 | 63 | .head{ 64 | position: fixed; 65 | top: 0; 66 | left: 0; 67 | z-index: 999; 68 | width: 100%; 69 | background-color: #f3f7fa; 70 | height: 70px; 71 | filter:alpha(opacity=90); 72 | -moz-opacity:0.9; 73 | opacity:0.9; 74 | -khtml-opacity: 0.9; 75 | } 76 | 77 | .logo_img{ 78 | width: 45px; 79 | height: 45px; 80 | border-radius: 50%; 81 | border: 2px solid #ffffff; 82 | margin-bottom: 15px; 83 | } 84 | 85 | .head_logo_div,.head_nav_div{ 86 | width: 50%; 87 | float: left; 88 | } 89 | 90 | .head_logo_div{ 91 | line-height: 70px; 92 | text-align: center; 93 | } 94 | 95 | .head_nav_div{ 96 | line-height: 70px; 97 | } 98 | 99 | .head_nav{ 100 | margin: 0 auto; 101 | } 102 | 103 | .head_nav ul li{ 104 | float: left; 105 | margin-right: 55px; 106 | cursor: pointer; 107 | font-size: 16px; 108 | } 109 | 110 | .head_nav ul li a{ 111 | font-size: 16px; 112 | color: #333333; 113 | -webkit-transition: all 0.2s; 114 | -moz-transition: all 0.2s; 115 | -o-transition: all 0.2s; 116 | transform: all 0.2s; 117 | } 118 | 119 | .head_nav ul li a:hover{ 120 | color:#4b91c9; 121 | } 122 | 123 | .wrapBox{ 124 | top: 0; 125 | position: fixed; 126 | width: 100%; 127 | height: 100%; 128 | } 129 | /* 130 | #wrapBox{ 131 | -webkit-transition: all 1s; 132 | -moz-transition: all 1s; 133 | -o-transition: all 1s; 134 | 135 | } 136 | */ 137 | .box{ 138 | overflow: hidden; 139 | position: relative; 140 | width: 100%; 141 | height: 100%; 142 | /* 143 | -webkit-transition: all 1s; 144 | -moz-transition: all 1s; 145 | -o-transition: all 1s; 146 | */ 147 | } 148 | 149 | .box01_content{ 150 | position: absolute; 151 | z-index: 3; 152 | top: 13%; 153 | left: 10%; 154 | width: 80%; 155 | } 156 | 157 | .head_div{ 158 | width: 80%; 159 | margin:0 auto; 160 | height: 50%; 161 | } 162 | 163 | .cycle_item{ 164 | background: url('../images/icon/cycle.svg') no-repeat; 165 | width: 400px; 166 | height: 400px; 167 | margin-left: auto; 168 | margin-right: auto; 169 | position: relative; 170 | } 171 | 172 | .green_cycle{ 173 | width: 260px; 174 | height: 260px; 175 | margin:0 auto; 176 | padding-top: 70px; 177 | } 178 | 179 | .yellow_cycle{ 180 | display: inline-block; 181 | width: 240px; 182 | height: 240px; 183 | margin: 10px; 184 | } 185 | 186 | .blue_cycle{ 187 | width: 220px; 188 | height: 220px; 189 | text-align: center; 190 | margin: 10px auto 10px auto; 191 | } 192 | 193 | .green_cycle_img,.yellow_cycle_img,.blue_cycle_img{ 194 | position: absolute; 195 | } 196 | 197 | .head_img_div{ 198 | position: relative; 199 | z-index: 2; 200 | display: inline; 201 | width: 200px; 202 | height: 200px; 203 | margin-top: 7px; 204 | } 205 | 206 | .head_img { 207 | display: inline-block; 208 | width: 200px; 209 | height: 200px; 210 | border-radius: 50%; 211 | border: 3px solid pink; 212 | margin: 7px; 213 | -webkit-animation: headneon 1.5s ease-in-out infinite alternate; 214 | -moz-animation: headneon 1.5s ease-in-out infinite alternate; 215 | animation: headneon 1.5s ease-in-out infinite alternate; 216 | } 217 | 218 | @-webkit-keyframes headneon { 219 | from { 220 | box-shadow: 0 0 1px #fff, 221 | 0 0 2px #fff, 222 | 0 0 3px #fff, 223 | 0 0 4px #fff; 224 | } 225 | to { 226 | box-shadow: 0 0 5px #fff, 227 | 0 0 10px #fff, 228 | 0 0 15px #fff, 229 | 0 0 20px #fff; 230 | } 231 | } 232 | 233 | @-moz-keyframes headneon { 234 | from { 235 | box-shadow: 0 0 1px #fff, 236 | 0 0 2px #fff, 237 | 0 0 3px #fff, 238 | 0 0 4px #fff; 239 | } 240 | to { 241 | box-shadow: 0 0 5px #fff, 242 | 0 0 10px #fff, 243 | 0 0 15px #fff, 244 | 0 0 20px #fff; 245 | } 246 | } 247 | 248 | .green_cycle_img{ 249 | animation-name: clockwise; 250 | animation-duration:1s; 251 | animation-timing-function: linear; 252 | animation-iteration-count: infinite; 253 | animation-direction: normal; 254 | 255 | /*safari & Chrome */ 256 | -webkit-animation-name:clockwise; 257 | -webkit-animation-duration:1s; 258 | -webkit-animation-timing-function: linear; 259 | -webkit-animation-iteration-count: infinite; 260 | -webkit-animation-direction: normal; 261 | } 262 | 263 | .yellow_cycle_img{ 264 | animation-name: anticlockwise; 265 | animation-duration:1s; 266 | animation-timing-function: linear; 267 | animation-iteration-count: infinite; 268 | animation-direction: normal; 269 | 270 | /*safari & Chrome */ 271 | -webkit-animation-name:anticlockwise; 272 | -webkit-animation-duration:1s; 273 | -webkit-animation-timing-function: linear; 274 | -webkit-animation-iteration-count: infinite; 275 | -webkit-animation-direction: normal; 276 | } 277 | 278 | .blue_cycle_img{ 279 | animation-name: clockwise; 280 | animation-duration:1s; 281 | animation-timing-function: linear; 282 | animation-iteration-count: infinite; 283 | animation-direction: normal; 284 | 285 | /*safari & Chrome */ 286 | -webkit-animation-name:clockwise; 287 | -webkit-animation-duration:1s; 288 | -webkit-animation-timing-function: linear; 289 | -webkit-animation-iteration-count: infinite; 290 | -webkit-animation-direction: normal; 291 | } 292 | 293 | @keyframes clockwise{ 294 | from { 295 | -webkit-transform:rotate(0deg); 296 | -moz-transform:rotate(0deg); 297 | -ms-transform: rotate(0deg); 298 | -o-transform: rotate(0deg); 299 | } 300 | to { 301 | -webkit-transform:rotate(360deg); 302 | -moz-transform:rotate(360deg); 303 | -ms-transform: rotate(360deg); 304 | -o-transform: rotate(360deg); 305 | } 306 | } 307 | 308 | @-webkit-keyframes clockwise{ 309 | from { 310 | -webkit-transform:rotate(0deg); 311 | } 312 | to { 313 | -webkit-transform:rotate(360deg); 314 | } 315 | } 316 | 317 | @keyframes anticlockwise{ 318 | from { 319 | -webkit-transform:rotate(0deg); 320 | -moz-transform:rotate(0deg); 321 | -ms-transform: rotate(0deg); 322 | -o-transform: rotate(0deg); 323 | } 324 | to { 325 | -webkit-transform:rotate(-360deg); 326 | -moz-transform:rotate(-360deg); 327 | -ms-transform: rotate(-360deg); 328 | -o-transform: rotate(-360deg); 329 | } 330 | } 331 | 332 | @-webkit-keyframes anticlockwise{ 333 | from { 334 | -webkit-transform:rotate(0deg); 335 | } 336 | to { 337 | -webkit-transform:rotate(-360deg); 338 | } 339 | } 340 | 341 | .cycle_item a{ 342 | position: absolute; 343 | display: block; 344 | border-radius: 25px; 345 | width:120px; 346 | height: 50px; 347 | left: -50px; 348 | top: 180px; 349 | } 350 | 351 | .github_a{ 352 | background-color: #42c9a3; 353 | } 354 | 355 | 356 | .github_icon{ 357 | background: url('../images/icon/github.png') no-repeat; 358 | border-radius: 25px; 359 | display: block; 360 | width: 50px; 361 | height: 50px; 362 | position: relative; 363 | background-size: cover; 364 | -moz-background-size: cover; 365 | left: 5px; 366 | } 367 | 368 | .github_text,.weibo_text,.blog_text{ 369 | width: 50px; 370 | margin-top: 0; 371 | left: 50px; 372 | text-align: right; 373 | padding: 0 5px; 374 | position: absolute; 375 | top: 0; 376 | } 377 | 378 | .item_name{ 379 | font-size: 16px; 380 | line-height: 50px; 381 | text-align: center; 382 | color: #fff; 383 | white-space: nowrap; 384 | } 385 | 386 | .weibo_a{ 387 | background-color: #EAC251; 388 | } 389 | .weibo_a .weibo_icon{ 390 | background: url('../images/icon/weibo.png'); 391 | border-radius: 25px; 392 | display: block; 393 | width: 50px; 394 | height: 50px; 395 | position: relative; 396 | background-size: cover; 397 | -moz-background-size: cover; 398 | left: 5px; 399 | } 400 | 401 | 402 | .blog_a{ 403 | background-color: #6DB3D9; 404 | } 405 | 406 | .blog_a .blog_icon{ 407 | background: url('../images/icon/blog.png'); 408 | display: block; 409 | width: 50px; 410 | height: 50px; 411 | position: relative; 412 | background-size: cover; 413 | -moz-background-size: cover; 414 | left: 5px; 415 | top: -5px; 416 | } 417 | 418 | .box01_content h1,.box01_content h2,.box01_content p{ 419 | color: #ffffff; 420 | font-weight: lighter; 421 | text-align: center; 422 | } 423 | 424 | .box01_content .title{ 425 | font-size: 40px; 426 | margin-top: 10px; 427 | } 428 | 429 | .box01_content .title_h2{ 430 | font-size: 30px; 431 | margin-top: 10px; 432 | margin-bottom: 20px; 433 | } 434 | 435 | #box01_text{ 436 | width: 100%; 437 | overflow: hidden; 438 | position: relative; 439 | } 440 | 441 | .box01_content .box01_p{ 442 | font-size: 20px; 443 | font-weight: lighter; 444 | line-height: 38px; 445 | -webkit-transition: all ease 0.3s; 446 | -moz-transition: all ease 0.3s; 447 | -ms-transition: all ease 0.3s; 448 | transition: all ease 0.3s; 449 | filter:alpha(opacity=0); 450 | -moz-opacity:0; 451 | -khtml-opacity: 0; 452 | opacity: 0; 453 | cursor: pointer; 454 | } 455 | 456 | .box01_content .box01_p:hover{ 457 | font-size: 22px; 458 | } 459 | 460 | .float_btn{ 461 | z-index: 999; 462 | display: block; 463 | position: fixed; 464 | right: 40px; 465 | top: 50%; 466 | } 467 | 468 | .float_btn li{ 469 | height: 12px; 470 | width: 12px; 471 | border: 1px solid #ffffff; 472 | border-radius: 50%; 473 | margin-bottom: 14px; 474 | background-color: transparent; 475 | -webkit-transition: all 0.3s; 476 | -moz-transition: all 0.3s; 477 | -o-transition: all 0.3s; 478 | } 479 | 480 | .float_btn li:last-child{ 481 | margin-bottom: 0; 482 | } 483 | 484 | .float_btn>.btn_on{ 485 | background: #ffffff; 486 | } 487 | 488 | .arrow_div{ 489 | z-index: 5; 490 | position: absolute; 491 | bottom: 50px; 492 | text-align: center; 493 | width: 100%; 494 | } 495 | 496 | .box_content{ 497 | width: 80%; 498 | left: 10%; 499 | position: absolute; 500 | z-index: 2; 501 | } 502 | 503 | .box_content{ 504 | top: 18%; 505 | } 506 | 507 | .shuxian{ 508 | width: 1px; 509 | height: 100%; 510 | background-color: #42c9a3; 511 | } 512 | 513 | #box02_text{ 514 | width: 50%; 515 | min-width: 400px; 516 | float: left; 517 | overflow: hidden; 518 | cursor: pointer; 519 | } 520 | 521 | #box02_text h1{ 522 | font-size: 25px; 523 | font-weight: lighter; 524 | color: #ffffff; 525 | margin-top: 25px; 526 | text-align: center; 527 | position: relative; 528 | right: -100%; 529 | -webkit-transition: all 0.5s; 530 | -moz-transition: all 0.5s; 531 | -o-transition: all 0.5s; 532 | transform: all 0.5s; 533 | } 534 | 535 | .overline{ 536 | width: 100%; 537 | height: 0; 538 | border-bottom: 1px dashed #ffffff; 539 | position: relative; 540 | right: -100%; 541 | -webkit-transition: all 0.5s; 542 | -moz-transition: all 0.5s; 543 | -o-transition: all 0.5s; 544 | transform: all 0.5s; 545 | } 546 | 547 | #box02_text p{ 548 | font-size: 20px; 549 | font-weight: lighter; 550 | color: #ffffff; 551 | line-height: 38px; 552 | text-align: center; 553 | position: relative; 554 | right: -100%; 555 | -webkit-transition: all 0.5s; 556 | -moz-transition: all 0.5s; 557 | -o-transition: all 0.5s; 558 | transform: all 0.5s; 559 | } 560 | 561 | #box02_text p:hover{ 562 | font-size: 22px; 563 | } 564 | 565 | .box03_content{ 566 | right: 19%; 567 | height: 60%; 568 | text-align: right; 569 | overflow: hidden; 570 | } 571 | 572 | .timeUl{ 573 | height: 100%; 574 | width: 160%; 575 | position: relative; 576 | left: 0; 577 | -webkit-transition: all ease 0.8s; 578 | -moz-transition: all ease 0.8s; 579 | -ms-transition: all ease 0.8s; 580 | transition: all ease 0.8s; 581 | } 582 | 583 | .timeUl::before{ 584 | content: ' '; 585 | top: 50%; 586 | position: absolute; 587 | height: 0; 588 | width: 100%; 589 | padding: 0 20px; 590 | border:1px dashed #ffffff; 591 | display: block; 592 | } 593 | 594 | .timeUl::after{ 595 | content: ''; 596 | display: table; 597 | clear: both; 598 | } 599 | 600 | .timeUl li{ 601 | width: 25%; 602 | float: left; 603 | height: 100%; 604 | position: relative; 605 | } 606 | 607 | .timeUl li::before{ 608 | content: ' '; 609 | top: 50%; 610 | left: 50%; 611 | position: absolute; 612 | height: 0; 613 | width: 12px; 614 | height: 12px; 615 | border: 4px solid #E7A98F; 616 | display: block; 617 | z-index: 35; 618 | background: #ffffff; 619 | border-radius: 50%; 620 | margin-top: -8px; 621 | margin-left: -8px; 622 | } 623 | 624 | .timeUl li div{ 625 | height: 45%; 626 | width: 100%; 627 | background-color: #444444; 628 | filter:alpha(opacity=90); 629 | -moz-opacity:0.9; 630 | -khtml-opacity: 0.9; 631 | opacity: 0.9; 632 | text-align: center; 633 | color: #ffffff; 634 | box-shadow: 10px 10px 5px #000000; 635 | } 636 | 637 | .timeUl li:nth-child(2n) div{ 638 | position: absolute; 639 | bottom: 10px; 640 | } 641 | 642 | .right_div,.left_div{ 643 | z-index: 5; 644 | position: absolute; 645 | text-align: center; 646 | top: 50%; 647 | } 648 | 649 | .timeUl li div{ 650 | font-weight: normal; 651 | } 652 | 653 | .left_arrow,.right_arrow{ 654 | margin-top: 52px; 655 | } 656 | 657 | .timeUl li div h1{ 658 | line-height: 40px; 659 | font-size: 28px; 660 | font-weight: lighter; 661 | } 662 | 663 | .timeUl li div p{ 664 | line-height: 28px; 665 | font-size: 18px; 666 | font-weight: lighter; 667 | } 668 | 669 | .right_div{ 670 | right: 0; 671 | } 672 | 673 | .box04_content{ 674 | left: 10%; 675 | height: 80%; 676 | overflow: hidden; 677 | } 678 | 679 | .box04_title{ 680 | font-size: 25px; 681 | font-weight: lighter; 682 | text-align: center; 683 | color: #ffffff; 684 | } 685 | 686 | 687 | .hobby_content{ 688 | padding: 15px 0 0 0; 689 | } 690 | 691 | .hobby_content li{ 692 | width: 30%; 693 | float: left; 694 | } 695 | 696 | .hobby_img_div{ 697 | position: relative; 698 | text-align: center; 699 | height: 280px; 700 | } 701 | 702 | .spinner{ 703 | width: 230px; 704 | height: 230px; 705 | margin: 0 auto; 706 | border-radius: 50%; 707 | -webkit-transition: all 0.8s ease-in-out; 708 | -moz-transition: all 0.8s ease-in-out; 709 | transition: all 0.8s ease-in-out; 710 | filter:alpha(opacity=80); 711 | -moz-opacity:0.8; 712 | opacity:0.8; 713 | -khtml-opacity: 0.8; 714 | -webkit-animation: headneon 1.5s ease-in-out infinite alternate; 715 | -moz-animation: headneon 1.5s ease-in-out infinite alternate; 716 | animation: headneon 1.5s ease-in-out infinite alternate; 717 | } 718 | 719 | .spinner_01{ 720 | border: 10px solid #ecab18; 721 | border-right-color: #1ad280; 722 | border-bottom-color: #1ad280; 723 | } 724 | 725 | .spinner_02{ 726 | border: 10px solid #ff9933; 727 | border-right-color: #3366cc; 728 | border-bottom-color: #3366cc; 729 | } 730 | 731 | .spinner_03{ 732 | border: 10px solid #339933; 733 | border-right-color: #cc9900; 734 | border-bottom-color: #cc9900; 735 | } 736 | 737 | .hobby_img{ 738 | position: absolute; 739 | top: 10px; 740 | bottom: 0; 741 | left: 50%; 742 | margin-left: -115px; 743 | right: 0; 744 | width: 230px; 745 | height: 230px; 746 | border-radius: 50%; 747 | } 748 | 749 | .hobby_img_info{ 750 | position: absolute; 751 | top: 10px; 752 | bottom: 0; 753 | left: 50%; 754 | margin-left: -115px; 755 | right: 0; 756 | width: 230px; 757 | height: 230px; 758 | border-radius: 50%; 759 | background: rgba(0, 0, 0, 0.6); 760 | filter:alpha(opacity=0); 761 | -moz-opacity:0; 762 | opacity:0; 763 | -khtml-opacity: 0; 764 | -webkit-transition: all 0.8s ease-in-out; 765 | -moz-transition: all 0.8s ease-in-out; 766 | transition: all 0.8s ease-in-out; 767 | } 768 | 769 | .hobby_img_info h1{ 770 | margin:80px 45px 0 45px; 771 | line-height: 40px; 772 | font-size: 25px; 773 | color: #ffffff; 774 | font-weight: lighter; 775 | border-bottom: 1px solid #ffffff; 776 | } 777 | 778 | .hobby_img_info h2{ 779 | color: #bbb; 780 | font-size: 18px; 781 | line-height: 35px; 782 | font-style: italic; 783 | } 784 | 785 | .hobby_img img{ 786 | width: 230px; 787 | height: 230px; 788 | border-radius: 50%; 789 | } 790 | 791 | .hobby_img_div:hover .spinner{ 792 | -webkit-transform: rotate(180deg); 793 | -moz-transform: rotate(180deg); 794 | -ms-transform: rotate(180deg); 795 | -o-transform: rotate(180deg); 796 | transform: rotate(180deg); 797 | } 798 | 799 | .hobby_img_div:hover .hobby_img_info{ 800 | filter:alpha(opacity=100); 801 | -moz-opacity:1; 802 | opacity:1; 803 | -khtml-opacity: 1; 804 | } 805 | 806 | .hobby_text_div{ 807 | padding: 0 30px; 808 | color: #DADADA; 809 | } 810 | 811 | .hobby_text_div p{ 812 | text-indent:2em; 813 | padding: 0.2em 0; 814 | font-size: 19px; 815 | font-weight: lighter; 816 | } 817 | 818 | .hobby_text_div p a{ 819 | color: #EEEEEE; 820 | font-weight: lighter; 821 | text-decoration: underline; 822 | } 823 | 824 | .hobby_01{ 825 | background: rgba(140, 131, 131, 0.6); 826 | padding: 15px 0 15px 0; 827 | margin-right: 3%; 828 | border-radius: 10px; 829 | } 830 | 831 | .hobby_02{ 832 | background: rgba(132, 59, 59, 0.6); 833 | padding: 15px 0 10px 0; 834 | margin-right: 3%; 835 | border-radius: 10px; 836 | } 837 | 838 | .hobby_03{ 839 | background: rgba(114, 53, 134, 0.6); 840 | padding: 15px 0 10px 0; 841 | border-radius: 10px; 842 | } 843 | 844 | .hobby_03 .hobby_text_div p a{ 845 | color: #969292; 846 | } 847 | 848 | .foot{ 849 | width: 100%; 850 | background: #ffffff; 851 | position: relative; 852 | padding-top: 60px; 853 | display: block; 854 | } 855 | 856 | .foot_info_main{ 857 | width: 62%; 858 | margin: 0 auto; 859 | padding-bottom: 60px; 860 | border-bottom: 1px solid #eeeeee; 861 | } 862 | 863 | .foot_info_main ul{ 864 | width: 100%; 865 | } 866 | 867 | .foot_info_main ul li{ 868 | width: 23%; 869 | margin: 0px 0 16px 0; 870 | text-align: center; 871 | border: #ffffff solid 5px; 872 | float: left; 873 | cursor: pointer; 874 | } 875 | 876 | .foot_info_main ul li:hover{ 877 | border-color: #bbb; 878 | } 879 | 880 | 881 | .foot_info_main ul li a{ 882 | display: block; 883 | width: 100%; 884 | height: 100%; 885 | padding: 10px 0; 886 | font-size: 20px; 887 | color: #FEFEFE; 888 | text-decoration: none; 889 | font-variant: small-caps; 890 | background-position: 16px center; 891 | background-repeat: no-repeat; 892 | background-size: 30px; 893 | } 894 | 895 | .github_items{ 896 | background:rgba(0,0,0,0.8) 897 | } 898 | 899 | .github_items a{ 900 | background-color: rgba(0,0,0,0.8); 901 | background: url(../images/icon/github_white.png); 902 | } 903 | 904 | .google_items{ 905 | background:rgba(80, 43, 127,0.8); 906 | } 907 | 908 | .google_items a{ 909 | background-color:rgba(80, 43, 127,0.8); 910 | background: url(../images/icon/google.png); 911 | } 912 | 913 | .twitter_items{ 914 | background:rgba(25, 25, 115,0.8); 915 | } 916 | 917 | .twitter_items a{ 918 | background-color:rgba(25, 25, 115,0.8); 919 | background: url(../images/icon/twitter.png); 920 | } 921 | 922 | .facebook_items{ 923 | background:rgba(59,89,152,0.8); 924 | } 925 | 926 | .facebook_items a{ 927 | background-color:rgba(59,89,152,0.8); 928 | background: url(../images/icon/facebook.png); 929 | } 930 | 931 | .weibo_items{ 932 | background:rgba(189,64,64,0.8); 933 | } 934 | 935 | .weibo_items a{ 936 | background-color:rgba(189,64,64,0.8); 937 | background: url(../images/icon/weibo.png); 938 | } 939 | 940 | .zhihu_items{ 941 | background:rgba(6,100,195,0.8); 942 | } 943 | 944 | .zhihu_items a{ 945 | background-color:rgba(6,100,195,0.8); 946 | background: url(../images/icon/zhihu.png); 947 | } 948 | 949 | 950 | .blog_items{ 951 | background:rgba(153,0,102,0.8); 952 | } 953 | 954 | .blog_items a{ 955 | background-color:rgba(153,0,102,0.8); 956 | background: url(../favicon.ico); 957 | } 958 | 959 | 960 | .email_items{ 961 | background:rgba(51,153,102,0.8); 962 | } 963 | 964 | .email_items a{ 965 | background-color:rgba(51,153,102,0.8); 966 | background: url(../images/icon/email.png); 967 | } 968 | 969 | .foot_title{ 970 | font-variant: small-caps; 971 | color: black; 972 | font-size: 20px; 973 | line-height: 30px; 974 | text-align: center; 975 | } 976 | 977 | .qrcode_div{ 978 | margin-top: 10px; 979 | text-align: center; 980 | } 981 | 982 | .qrcode_div span{ 983 | width: 45px; 984 | height: 45px; 985 | position: relative; 986 | display: inline-block; 987 | /*background-size: 45px; 988 | background-repeat: no-repeat;*/ 989 | } 990 | 991 | .qrcode_div span img{ 992 | position: absolute; 993 | width: 150px; 994 | height: 150px; 995 | border: 5px solid greenyellow; 996 | border-radius: 3px; 997 | top: -170px; 998 | left: -55px; 999 | display: block; 1000 | display: none; 1001 | -webkit-transition: all 0.5s; 1002 | -moz-transition: all 0.5s; 1003 | -o-transition: all 0.5s; 1004 | transition: all 0.5s; 1005 | } 1006 | 1007 | .weixin{ 1008 | margin-right: 30px; 1009 | } 1010 | 1011 | .dingding{ 1012 | margin-right: 30px; 1013 | } 1014 | 1015 | .weixin_icon{ 1016 | width: 45px; 1017 | height: 45px; 1018 | background: url(../images/icon/weixin.png); 1019 | background-repeat: no-repeat; 1020 | background-size: 45px; 1021 | display: block; 1022 | } 1023 | 1024 | .dingding_icon{ 1025 | width: 45px; 1026 | height: 45px; 1027 | background: url(../images/icon/dingding.png); 1028 | background-repeat: no-repeat; 1029 | background-size: 45px; 1030 | display: block; 1031 | } 1032 | 1033 | .qq_icon{ 1034 | width: 45px; 1035 | height: 45px; 1036 | background: url(../images/icon/qq.png); 1037 | background-repeat: no-repeat; 1038 | background-size: 45px; 1039 | display: block; 1040 | } 1041 | 1042 | .weixin_icon:hover + .weixin_img{ 1043 | display: block; 1044 | } 1045 | 1046 | .dingding_icon:hover + .dingding_img{ 1047 | display: block; 1048 | } 1049 | 1050 | .qq_icon:hover + .qq_img{ 1051 | display: block; 1052 | } 1053 | 1054 | .foot_power{ 1055 | text-align: center; 1056 | padding: 30px 0; 1057 | } 1058 | 1059 | .foot_power h3{ 1060 | font-size: 16px; 1061 | color: #999999; 1062 | font-weight: normal; 1063 | } 1064 | 1065 | .foot_power h3 a{ 1066 | color: #999999; 1067 | font-weight: normal; 1068 | } 1069 | 1070 | .box_bg{ 1071 | position: absolute; 1072 | } 1073 | 1074 | .nav_li_on{ 1075 | color: red; 1076 | } 1077 | 1078 | .hobby_img_info_mob{ 1079 | display: none; 1080 | } 1081 | 1082 | @media screen and (max-width: 1100px){ 1083 | .head{ 1084 | height: 70px 1085 | } 1086 | 1087 | .head_logo_div{ 1088 | width: 30%; 1089 | } 1090 | 1091 | .head_nav_div{ 1092 | width: 70%; 1093 | font-size: 16px; 1094 | } 1095 | 1096 | .head .head_nav ul li{ 1097 | margin-right: 40px; 1098 | } 1099 | 1100 | .box01_content{ 1101 | width: 100%; 1102 | left: 0; 1103 | } 1104 | 1105 | .box_content{ 1106 | left: 0; 1107 | width: 100%; 1108 | } 1109 | 1110 | #box02_text{ 1111 | display: none; 1112 | } 1113 | 1114 | .box02_content #bar_container{ 1115 | width: 90%; 1116 | margin: 0 auto; 1117 | float: none; 1118 | } 1119 | 1120 | .box04_content{ 1121 | width: auto; 1122 | top: 10%; 1123 | } 1124 | 1125 | #bar_container .bar{ 1126 | margin: 30px 0; 1127 | } 1128 | 1129 | .box03_content .right_div,.box03_content .left_div{ 1130 | top: 80%; 1131 | } 1132 | 1133 | .box03_content{ 1134 | width: 90%; 1135 | left: 5%; 1136 | } 1137 | 1138 | .float_btn{ 1139 | right: 1em; 1140 | } 1141 | 1142 | .box04_content{ 1143 | padding: 1em 0 0 0; 1144 | } 1145 | 1146 | .hobby_img_div{ 1147 | display: none; 1148 | } 1149 | 1150 | .hobby_content li{ 1151 | width: 90%; 1152 | margin: 0.5em auto; 1153 | float: none; 1154 | } 1155 | 1156 | .hobby_img_info_mob{ 1157 | display: block; 1158 | } 1159 | 1160 | .hobby_img_info_mob h1{ 1161 | line-height: 40px; 1162 | font-size: 25px; 1163 | color: #ffffff; 1164 | font-weight: lighter; 1165 | border-bottom: 1px solid #ffffff; 1166 | display: inline-block; 1167 | } 1168 | 1169 | .hobby_img_info_mob a{ 1170 | color: #bbb; 1171 | font-size: 18px; 1172 | line-height: 35px; 1173 | font-style: italic; 1174 | } 1175 | 1176 | .foot_info_main{ 1177 | width: 90%; 1178 | margin: 0 auto; 1179 | } 1180 | 1181 | .foot_info_main ul li{ 1182 | margin: 0px 0 16px 0; 1183 | width: 20%; 1184 | 1185 | } 1186 | 1187 | .foot_info_main ul li a{ 1188 | background: none; 1189 | } 1190 | } 1191 | 1192 | @media screen and (max-width: 700px){ 1193 | .head{ 1194 | height: 3rem; 1195 | } 1196 | 1197 | .head_logo_div{ 1198 | width: 100%; 1199 | height: 3rem; 1200 | line-height: 3rem; 1201 | } 1202 | 1203 | .head_nav_div{ 1204 | display: none; 1205 | } 1206 | 1207 | .box01_content{ 1208 | top: 0; 1209 | } 1210 | 1211 | .head_div{ 1212 | width: 100%; 1213 | } 1214 | 1215 | .cycle_item { 1216 | width: 100%; 1217 | height: auto; 1218 | margin: 0 auto; 1219 | background: none; 1220 | } 1221 | 1222 | .cycle_item a{ 1223 | display: none; 1224 | } 1225 | 1226 | .green_cycle{ 1227 | padding-top: 3.2em; 1228 | } 1229 | 1230 | 1231 | .box01_content .title{ 1232 | font-size: 1em; 1233 | } 1234 | 1235 | .box01_content .title_h2{ 1236 | font-size: 1rem; 1237 | margin-top: 0.5rem; 1238 | margin-bottom: 0.5rem; 1239 | } 1240 | 1241 | .box01_content .box01_p{ 1242 | font-size: 0.8rem; 1243 | line-height: 1.6rem; 1244 | } 1245 | 1246 | .box02_content{ 1247 | top: 5rem; 1248 | width: 100%; 1249 | height: auto; 1250 | } 1251 | 1252 | .logo_img{ 1253 | width: 2.5rem; 1254 | height: 2.5rem; 1255 | margin-bottom: 0.1rem; 1256 | } 1257 | 1258 | #bar_container .bar{ 1259 | margin: 0.5rem 0; 1260 | } 1261 | 1262 | .bar{ 1263 | height: 2rem; 1264 | font-size: 0.8rem; 1265 | } 1266 | 1267 | #bar_container .bar:before { 1268 | position: absolute; 1269 | padding: 0.5rem; 1270 | height: 2rem; 1271 | } 1272 | 1273 | #bar_container .bar:after { 1274 | position: absolute; 1275 | padding: 0.5rem; 1276 | height: 2rem; 1277 | right: -3rem; 1278 | } 1279 | 1280 | .box03_content{ 1281 | width: 90%; 1282 | left: 5%; 1283 | top: 3.2rem; 1284 | height: auto; 1285 | } 1286 | 1287 | .timeUl{ 1288 | width: auto; 1289 | height: auto; 1290 | } 1291 | 1292 | .timeUl::before { 1293 | display: none; 1294 | } 1295 | 1296 | .timeUl li { 1297 | width: 100%; 1298 | height: auto; 1299 | float: none; 1300 | position: relative; 1301 | margin-top: 0.6rem; 1302 | } 1303 | 1304 | .timeUl li:nth-child(2n) div{ 1305 | position: relative; 1306 | bottom: auto; 1307 | } 1308 | 1309 | .timeUl li::before{ 1310 | display: none; 1311 | } 1312 | 1313 | .timeUl li div{ 1314 | font-weight: lighter; 1315 | height: auto; 1316 | box-shadow: 0.6rem 0.6rem 0.3rem #000000; 1317 | padding: 0.3rem 0; 1318 | } 1319 | 1320 | .timeUl li div h1{ 1321 | line-height: 1.2rem; 1322 | font-size: 1rem; 1323 | } 1324 | 1325 | .timeUl li div p{ 1326 | line-height: 1rem; 1327 | font-size: 0.8rem; 1328 | } 1329 | 1330 | .box03_content .right_div, .box03_content .left_div{ 1331 | display: none; 1332 | } 1333 | 1334 | .arrow_div{ 1335 | bottom: 1rem; 1336 | } 1337 | 1338 | .box04_content{ 1339 | top: 3.2rem; 1340 | padding: 0; 1341 | height: auto; 1342 | } 1343 | 1344 | .box04_title{ 1345 | margin-top: 1.5rem; 1346 | font-variant: small-caps; 1347 | margin-top: 1rem; 1348 | line-height: 2rem; 1349 | } 1350 | 1351 | .hobby_content{ 1352 | padding: 0; 1353 | } 1354 | 1355 | .hobby_text_div{ 1356 | padding: 0 0.5rem; 1357 | } 1358 | 1359 | .hobby_img_info_mob h1{ 1360 | font-size: 1rem; 1361 | line-height: 1.2rem; 1362 | } 1363 | 1364 | .hobby_img_info_mob h1 a{ 1365 | font-size: 0.8rem; 1366 | line-height: 1.2rem; 1367 | } 1368 | 1369 | .hobby_text_div p{ 1370 | padding: 0; 1371 | font-size: 0.9rem; 1372 | font-weight: normal; 1373 | margin-top: 0.5rem; 1374 | } 1375 | 1376 | .hobby_text_div .about_p{ 1377 | display: none; 1378 | } 1379 | 1380 | .foot{ 1381 | padding-top: 0.5rem; 1382 | } 1383 | 1384 | .foot_title{ 1385 | font-size: 1rem; 1386 | line-height: 1.2rem; 1387 | } 1388 | 1389 | .foot_info_main ul li{ 1390 | width: 45%; 1391 | margin: 0px 0 0.2rem 0; 1392 | } 1393 | 1394 | .foot_info_main ul li a{ 1395 | font-size: 1rem; 1396 | } 1397 | 1398 | .qrcode_div{ 1399 | margin-top: 0.8rem; 1400 | } 1401 | 1402 | .qrcode_div span{ 1403 | width: 2rem; 1404 | height: 2rem; 1405 | background-size: 2rem; 1406 | } 1407 | 1408 | .qrcode_div span img{ 1409 | width: 8rem; 1410 | height: 8rem; 1411 | display: none; 1412 | top: -9rem; 1413 | left: -3.5rem; 1414 | } 1415 | 1416 | .weixin_icon{ 1417 | width: 2rem; 1418 | height: 2rem; 1419 | background-size: 2rem; 1420 | } 1421 | 1422 | .dingding_icon{ 1423 | width: 2rem; 1424 | height: 2rem; 1425 | background-size: 2rem; 1426 | } 1427 | 1428 | .qq_icon{ 1429 | width: 2rem; 1430 | height: 2rem; 1431 | background-size: 2rem; 1432 | } 1433 | 1434 | .weixin,.dingding{ 1435 | margin-right: 0.5rem; 1436 | } 1437 | 1438 | .foot_info_main{ 1439 | padding-bottom: 1rem; 1440 | } 1441 | 1442 | .foot_power{ 1443 | padding: 1rem 0; 1444 | } 1445 | 1446 | .foot_power h3{ 1447 | font-size: 0.8rem; 1448 | } 1449 | 1450 | #bar_container .bar.mint { 1451 | border-bottom: 0.2rem solid #0d7e68; 1452 | } 1453 | 1454 | #bar_container .bar.red { 1455 | border-bottom: 0.2rem solid #9f292a; 1456 | } 1457 | 1458 | #bar_container .bar.orange { 1459 | border-bottom: 0.2rem solid #dd481b; 1460 | } 1461 | 1462 | #bar_container .bar.lila { 1463 | border-bottom: 5px solid #2a242c; 1464 | } 1465 | 1466 | #bar_container .bar.gray { 1467 | border-bottom: 5px solid #333434; 1468 | } 1469 | 1470 | #bar_container .bar.blue { 1471 | border-bottom: 5px solid #333434; 1472 | } 1473 | 1474 | #bar_container .bar.green { 1475 | border-bottom: 5px solid #dd481b; 1476 | } 1477 | } --------------------------------------------------------------------------------