├── assets ├── img │ └── image │ │ └── logo.png └── css │ ├── reset.css │ ├── base.css │ └── index.css ├── index.html └── README.md /assets/img/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cyclegtx/wave_background/HEAD/assets/img/image/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 三里屯SOHO商盟 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 | 88 | 89 | -------------------------------------------------------------------------------- /assets/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figure, figcaption, hgroup, menu, nav, section, summary, time, mark, audio, video { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 100%; 5 | } 6 | body { 7 | font: 14px/1.5 "Microsoft YaHei", Helvetica, Arial, 'Lucida Grande', sans-serif; 8 | -webkit-tap-highlight-color: rgba(255,255,0,0); 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | -webkit-touch-callout: none; 13 | cursor: default; 14 | -ms-content-zooming: none; 15 | -webkit-text-size-adjust: 100%; 16 | -ms-text-size-adjust: 100%; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-font-smoothing: antialiased; 19 | -ms-font-smoothing: antialiased; 20 | font-smoothing: antialiased; 21 | text-rendering: optimizelegibility; 22 | color: #3c3c3c; 23 | } 24 | h1, h2, h3, h4, h5, h6 { 25 | -webkit-font-feature-settings: "liga", "dlig"; 26 | -moz-font-feature-settings: "liga=1, dlig=1"; 27 | font-feature-settings: "liga", "dlig"; 28 | } 29 | table { 30 | border-collapse: collapse; 31 | border-spacing: 0; 32 | empty-cells: show; 33 | line-height: 1.3em; 34 | } 35 | caption, th, td { 36 | vertical-align: middle; 37 | } 38 | q, blockquote { 39 | quotes: none; 40 | } 41 | q:before, q:after, blockquote:before, blockquote:after { 42 | content: ""; 43 | content: none; 44 | } 45 | img { 46 | border: 0; 47 | -ms-interpolation-mode: bicubic; 48 | } 49 | button, input, select, textarea { 50 | margin: 0; 51 | font-family: inherit; 52 | font-size: 100%; 53 | } 54 | button, input { 55 | line-height: normal; 56 | } 57 | button, select { 58 | text-transform: none; 59 | } 60 | button, 61 | html input[type="button"], 62 | input[type="reset"], 63 | input[type="submit"] { 64 | cursor: pointer; 65 | -webkit-appearance: button; 66 | } 67 | 68 | button[disabled], 69 | html input[disabled] { 70 | cursor: default; 71 | } 72 | 73 | input[type="checkbox"], 74 | input[type="radio"] { 75 | padding: 0; 76 | box-sizing: border-box; 77 | } 78 | input:not([type="checkbox"]):not([type="radio"]), select, textarea { 79 | user-select: auto; 80 | -webkit-appearance: none; 81 | -moz-appearance: none; 82 | width: 100%; 83 | } 84 | input[type="search"] { 85 | -webkit-box-sizing: content-box; 86 | -moz-box-sizing: content-box; 87 | box-sizing: content-box; 88 | -webkit-appearance: textfield; 89 | } 90 | input[type="search"]::-webkit-search-cancel-button, 91 | input[type="search"]::-webkit-search-decoration { 92 | -webkit-appearance: none; 93 | } 94 | 95 | button::-moz-focus-inner, 96 | input::-moz-focus-inner { 97 | padding: 0; 98 | border: 0; 99 | } 100 | textarea { 101 | overflow: auto; 102 | vertical-align: top; 103 | } 104 | p { 105 | -ms-word-break: break-all; 106 | word-break: break-all; 107 | word-break: break-word; 108 | -webkit-hyphens: auto; 109 | -moz-hyphens: auto; 110 | hyphens: auto; 111 | -webkit-hyphenate-before: 2; 112 | -webkit-hyphenate-after: 3; 113 | hyphenate-lines: 3; 114 | } 115 | a { 116 | outline: none; 117 | color: inherit; 118 | text-decoration: none; 119 | } 120 | fieldset { 121 | border: 0; 122 | } 123 | input[type="text"], input[type="email"], input[type="password"], textarea { 124 | padding: 6px; 125 | background-color: rgba(255, 255, 255, 1); 126 | font-size: 15px; 127 | line-height: 1.4em; 128 | outline: none; 129 | -webkit-appearance: none; 130 | } 131 | :focus { 132 | outline: none; 133 | } 134 | label { 135 | cursor: pointer; 136 | } 137 | b, strong { 138 | font-weight: 700; 139 | } 140 | em, i { 141 | font-style: italic; 142 | } 143 | small { 144 | font-size: 0.8em; 145 | } 146 | code{ 147 | font-family: arial; 148 | } -------------------------------------------------------------------------------- /assets/css/base.css: -------------------------------------------------------------------------------- 1 | /* ---------------------------------- 2 | * html, body 3 | * ---------------------------------- */ 4 | html, body { 5 | position: relative; 6 | width: 100%; 7 | } 8 | /* ---------------------------------- 9 | * box sizing 10 | * ---------------------------------- */ 11 | *, 12 | *:after, 13 | *::before { 14 | -webkit-box-sizing: border-box; 15 | -moz-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | /* ---------------------------------- 19 | * clearfix 20 | * ---------------------------------- */ 21 | .clearfix:before, 22 | .clearfix:after { 23 | display: table; 24 | content: " "; 25 | } 26 | .clearfix:after { 27 | clear: both; 28 | } 29 | /* ---------------------------------- 30 | * scroll 31 | * ---------------------------------- */ 32 | .scroll-y, .scroll-x { 33 | -webkit-overflow-scrolling: touch; 34 | -moz-overflow-scrolling: touch; 35 | overflow-scrolling: touch; 36 | } 37 | .scroll-y { 38 | overflow-x: hidden; 39 | overflow-y: scroll; 40 | } 41 | .scroll-x { 42 | overflow-x: scroll; 43 | overflow-y: hidden; 44 | } 45 | /* ---------------------------------- 46 | * hr 47 | * ---------------------------------- */ 48 | .rule { 49 | color: rgba(0, 0, 0, .1); 50 | border: none; 51 | border-bottom-width: 1px; 52 | border-bottom-style: solid; 53 | margin-bottom: 10px; 54 | } 55 | .rule--dotted { 56 | border-bottom-style: dotted; 57 | } 58 | .rule--dashed { 59 | border-bottom-style: dashed; 60 | } 61 | /* ---------------------------------- 62 | * image 63 | * ---------------------------------- */ 64 | img { 65 | display: block; 66 | width: 100%; 67 | } 68 | img[width], 69 | img[height] { 70 | width: none; 71 | } 72 | .img--right { 73 | float: right; 74 | marin: 10px; 75 | } 76 | .img--left { 77 | float: left; 78 | margin: 10px; 79 | } 80 | .img--center { 81 | display: block; 82 | margin: 0 auto 10px; 83 | } 84 | /* ---------------------------------- 85 | * ellipsis 86 | * ---------------------------------- */ 87 | .ellipsis { 88 | white-space: nowrap; 89 | overflow: hidden; 90 | text-overflow: ellipsis; 91 | } 92 | /* ---------------------------------- 93 | * break 94 | * ---------------------------------- */ 95 | .break { 96 | word-wrap: break-word; 97 | word-break: normal; 98 | word-break:break-all; 99 | } 100 | /* ---------------------------------- 101 | * align 102 | * ---------------------------------- */ 103 | .align-vertical { 104 | display: -webkit-box; 105 | display: -moz-box; 106 | display: -ms-flexbox; 107 | display: box; 108 | /*------content vertical------*/ 109 | -webkit-box-align: center; 110 | -moz-box-align: center; 111 | -ms-flex-align:center; 112 | box-align: center; 113 | /*------content horizontal------*/ 114 | -webkit-box-pack: center; 115 | -moz-box-pack: center; 116 | -ms-flex-pack:center; 117 | box-pack: center; 118 | } 119 | .align-center { 120 | text-align: center; 121 | } 122 | .align-left { 123 | text-align: left; 124 | } 125 | .align-right { 126 | text-align: right; 127 | } 128 | /* ---------------------------------- 129 | * flexbox 130 | * ---------------------------------- */ 131 | .flexbox { 132 | display: -webkit-box !important; 133 | display: -moz-box !important; 134 | display: -ms-flexbox !important; 135 | display: box !important; 136 | } 137 | .flexbox > .cell__equality { 138 | -webkit-box-flex: 1; 139 | -webkit-flex: 1; 140 | -moz-box-flex: 1; 141 | -ms-box-flex: 1; 142 | flex: 1; 143 | } 144 | .flexbox--block { 145 | -webkit-box-orient: vertical; 146 | -moz-box-orient: vertical; 147 | box-orient: vertical; 148 | } 149 | .flexbox--top { 150 | -webkit-box-align: start; 151 | -moz-box-align: start; 152 | box-align: start; 153 | } 154 | .flexbox--bottom { 155 | -webkit-box-align: end; 156 | -moz-box-align: end; 157 | box-align: end; 158 | } 159 | .flexbox--middle { 160 | -webkit-box-align: center; 161 | -moz-box-align: center; 162 | box-align: center; 163 | } 164 | .flexbox--grass { 165 | -webkit-box-align: grass; 166 | -moz-box-align: grass; 167 | box-align: grass; 168 | } 169 | /* ---------------------------------- 170 | * tablebox 171 | * ---------------------------------- */ 172 | .tablebox { 173 | display: table; 174 | width: 100%; 175 | } 176 | html.tablebox { 177 | display: block; 178 | width: auto; 179 | } 180 | .tablebox__cell { 181 | display: table-cell; 182 | vertical-align: middle; 183 | } 184 | /* ---------------------------------- 185 | * no-flicker 186 | * ---------------------------------- */ 187 | .no-flicker { 188 | -webkit-transform-style: preserve-3d; 189 | -moz-transform-style: preserve-3d; 190 | transform-style: preserve-3d; 191 | -webkit-backface-visibility: hidden; 192 | -moz-backface-visibility: hidden; 193 | backface-visibility: hidden; 194 | } 195 | /* ---------------------------------- 196 | * full 197 | * ---------------------------------- */ 198 | .full-screen { 199 | width: 100%; 200 | height: 100%; 201 | } 202 | .full-background { 203 | background-repeat: no-repeat; 204 | background-position: center center; 205 | background-size: cover; 206 | } 207 | .full-fixe{ 208 | position: fixed; 209 | left: 0; 210 | top:0; 211 | } 212 | /* ---------------------------------- 213 | * page 214 | * ---------------------------------- */ 215 | section[role="page"] { 216 | position: relative; 217 | } 218 | section[role="page"][type="end"] { 219 | padding-bottom: 56px; 220 | } 221 | section[role="page"][type="both"]{ 222 | padding: 10px 0 56px; 223 | } 224 | /* ---------------------------------- 225 | * button 226 | * ---------------------------------- */ 227 | .btn { 228 | position: relative; 229 | display: inline-block; 230 | vertical-align: middle; 231 | outline: none; 232 | text-align: center; 233 | text-decoration: none; 234 | white-space: nowrap; 235 | cursor: pointer; 236 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 237 | -webkit-transition: all 0.2s ease; 238 | -moz-transition: all 0.2s ease; 239 | transition: all 0.2s ease; 240 | font-size: 16px; 241 | line-height: 1; 242 | border-radius: 3px; 243 | color: rgba(0, 0, 0, 1); 244 | background-color: #ffffff; 245 | padding: 5px 10px; 246 | border:1px solid transparent; 247 | } 248 | .btn:hover{ 249 | background-color: #f9f9f9; 250 | } 251 | .btn--default{ 252 | border-color: #c9c9c9; 253 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | canvas制作波浪状动态背景 2 | =============== 3 | 先看效果图 4 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/1.gif) 5 | 6 | 此页面是微信公众帐号《玩转三里屯》中的“消费指南”功能所用的页面。考虑到页面只在手机中浏览，而且手机对canvas的支持又非常好，所以打算使用canvas做点不一样的动画。 7 | 8 | 代码在线预览 9 | 10 | 11 | ####Step1.HTML页面 12 | 完成HTML页面 13 | 14 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/1.1.jpg) 15 | 16 | 点击查看历史代码 17 | ####Step2.添加Canvas 18 | 新建一个画布``````元素，并放在在所有按钮和logo的下方以免遮挡前面的元素。 19 | ```html 20 | 21 | ``` 22 | 23 | 将Canvas的宽高设定成其父元素的宽高，以充满他的父元素。也可以直接使用```window.innerHeight``` ```window.innerWidth``` 24 | 使其充满整个屏幕。 25 | 26 | ```javascript 27 | var canvas = document.getElementById('canvas'); 28 | var ctx = canvas.getContext('2d'); 29 | canvas.width = canvas.parentNode.offsetWidth; 30 | canvas.height = canvas.parentNode.offsetHeight; 31 | ``` 32 | 33 | 点击查看历史代码 34 | 35 | 36 | ####Step3.画矩形 37 | 在画布中画一个充满半个屏幕的矩形。 38 | 我们只需要找到矩形的四个定点的坐标，使用Canvas的绘制路径并填充这个路径。四个点分别是：```(0, 画布高度t/2)``` 39 | ```(画布宽度, 画布高度t/2)``` 40 | ```(画布宽度 画布高度t/2)``` 41 | ```(0, 画布高度t/2)``` 42 | 43 | 注意：坐标的（0，0）在画布的左上角。 44 | ```javascript 45 | //填充颜色 46 | ctx.fillStyle = "rgba(0,222,255, 0.2)"; 47 | //开始绘制路径 48 | ctx.beginPath(); 49 | //左上角 50 | ctx.moveTo(0, canvas.height/2); 51 | //右上角 52 | ctx.lineTo(canvas.width, canvas.height/2); 53 | //右下角 54 | ctx.lineTo(canvas.width, canvas.height); 55 | //左下角 56 | ctx.lineTo(0, canvas.height); 57 | //左上角 58 | ctx.lineTo(0, canvas.height/2); 59 | //闭合路径 60 | ctx.closePath(); 61 | //填充路径 62 | ctx.fill(); 63 | 64 | ``` 65 | 66 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/2.1.jpg) 67 | 68 | 69 | 点击查看历史代码 70 | 71 | 72 | ####Step4.使矩形运动 73 | 74 | 75 | 让矩形动起来。要做动画我们需要持续的清空画布并重新绘制新的矩形，就像电影每秒播放24张图片。我们新建一个loop函数，用来绘制每一帧的图像，并使用requestAnimFrame来告诉浏览器每一帧都要使用loop来绘制。 76 | 77 | 78 | ```javascript 79 | //如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout 80 | window.requestAnimFrame = (function(){ 81 | return window.requestAnimationFrame || 82 | window.webkitRequestAnimationFrame || 83 | window.mozRequestAnimationFrame || 84 | function( callback ){ 85 | window.setTimeout(callback, 1000 / 60); 86 | }; 87 | })(); 88 | function loop(){ 89 | requestAnimFrame(loop); 90 | } 91 | loop(); 92 | ``` 93 | 把之前绘制矩形的代码放到loop中，并在绘制矩形的代码之前清空画布中所有的图形。 94 | ```javascript 95 | function loop(){ 96 | //清空canvas 97 | ctx.clearRect(0,0,canvas.width,canvas.height); 98 | //绘制矩形 99 | ctx.fillStyle = "rgba(0,222,255, 0.2)"; 100 | ctx.beginPath(); 101 | ctx.moveTo(0, canvas.height/2); 102 | ctx.lineTo(canvas.width, canvas.height/2); 103 | ctx.lineTo(canvas.width, canvas.height); 104 | ctx.lineTo(0, canvas.height); 105 | ctx.lineTo(0, canvas.height/2); 106 | ctx.closePath(); 107 | ctx.fill(); 108 | requestAnimFrame(loop); 109 | } 110 | ``` 111 | 接下来我们更改每一帧中的矩形的高度来模拟波浪的形态。 112 | 113 | 波浪其实是在波峰与波谷之间做周期性运动。我们假设波峰与波谷的大小都是50px，那么矩形的高度的变化值应该在-50px到50px之间。为了达到周期性的效果我们采用正弦函数```sin(x)```乘以50，因为不管x值怎么变化sin(x)的值始终在-1与1之间。 114 | 115 | 我们新建一个变量```var step =0``` 使其在每一帧中自增，表示每一帧角度增加一度，并用```Math.sin()```取他的正弦值。JS中的sin使用的弧度值，我们需要把step转换成弧度值```var angle = step*Math.PI/180;```取角度的正弦值乘以50得到了矩形高度的变化量。将变化量加在矩形的左上与右上两个顶点的y坐标上。 116 | ```javascript 117 | //初始角度为0 118 | var step = 0; 119 | function loop(){ 120 | ctx.clearRect(0,0,canvas.width,canvas.height); 121 | ctx.fillStyle = "rgba(0,222,255, 0.2)"; 122 | //角度增加一度 123 | step++; 124 | //角度转换成弧度 125 | var angle = step*Math.PI/180; 126 | //矩形高度的变化量 127 | var deltaHeight = Math.sin(angle) * 50; 128 | ctx.beginPath(); 129 | //在矩形的左上与右上两个顶点加上高度变化量 130 | ctx.moveTo(0, canvas.height/2+deltaHeight); 131 | ctx.lineTo(canvas.width, canvas.height/2+deltaHeight); 132 | ctx.lineTo(canvas.width, canvas.height); 133 | ctx.lineTo(0, canvas.height); 134 | ctx.lineTo(0, canvas.height/2+deltaHeight); 135 | ctx.closePath(); 136 | ctx.fill(); 137 | requestAnimFrame(loop); 138 | } 139 | ``` 140 | 141 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/2.gif) 142 | 143 | 144 | 点击查看历史代码 145 | 146 | 147 | ####Step5.使矩形左右运动不同步 148 | 149 | 150 | 将右上顶点的变化值改为角度的余弦，使其左右不同步```var deltaHeightRight = Math.cos(angle) * 50;``` 151 | 152 | 153 | ```javascript 154 | //初始角度为0 155 | var step = 0; 156 | function loop(){ 157 | ctx.clearRect(0,0,canvas.width,canvas.height); 158 | ctx.fillStyle = "rgba(0,222,255, 0.2)"; 159 | //角度增加一度 160 | step++; 161 | //角度转换成弧度 162 | var angle = step*Math.PI/180; 163 | //矩形高度的变化量 164 | var deltaHeight = Math.sin(angle) * 50; 165 | //矩形高度的变化量(右上顶点) 166 | var deltaHeightRight = Math.cos(angle) * 50; 167 | ctx.beginPath(); 168 | ctx.moveTo(0, canvas.height/2+deltaHeight); 169 | //右上顶点 170 | ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight); 171 | ctx.lineTo(canvas.width, canvas.height); 172 | ctx.lineTo(0, canvas.height); 173 | ctx.lineTo(0, canvas.height/2+deltaHeight); 174 | ctx.closePath(); 175 | ctx.fill(); 176 | requestAnimFrame(loop); 177 | } 178 | ``` 179 | 180 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/3.gif) 181 | 182 | 183 | 点击查看历史代码 184 | 185 | 186 | ####Step6.模拟波浪的形态 187 | 188 | 189 | 将矩形的最上面的边变成曲线来模拟波浪的起伏。在上面的代码中我们用```lineTo```来绘制矩形的边，为了要绘制曲线我们需要```bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)```函数。 190 | 191 | 绘制的起点是矩形的左上顶点，结束点为右上顶点。```bezierCurveTo```函数的参数中```(cpX1,cpY1)```与```(cpX2,cpY2)```分别是起点与结束点的控制点，```(x,y)```为结束点。我们将两个控制点的x值设定在画布的正中心，y值在起始点与终点的y值上面减去50;```(canvas.width /2, canvas.height/2+deltaHeight-50)``` ```(canvas.width/2,canvas.height/2+deltaHeightRight-50)```(可以根据效果调整)。 192 | 193 | 194 | ```javascript 195 | ctx.beginPath(); 196 | ctx.moveTo(0, canvas.height/2+deltaHeight); 197 | //ctx.lineTo(canvas.width, canvas.height/2+deltaHeightRight); 198 | //画曲线 199 | ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight); 200 | ctx.lineTo(canvas.width, canvas.height); 201 | ctx.lineTo(0, canvas.height); 202 | ctx.lineTo(0, canvas.height/2+deltaHeight); 203 | ctx.closePath(); 204 | ``` 205 | 206 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/4.gif) 207 | 208 | 209 | 点击查看历史代码 210 | 211 | 212 | ####Step7.3个波浪 213 | 214 | 215 | 一个波浪画好了。我们只需要同时画3个不同颜色的波浪，并且使不同波浪的角度不同就可以得到效果图中的效果了。 216 | 217 | 218 | ```javascript 219 | //定义三条不同波浪的颜色 220 | var lines = ["rgba(0,222,255, 0.2)", 221 | "rgba(157,192,249, 0.2)", 222 | "rgba(0,168,255, 0.2)"]; 223 | function loop(){ 224 | ctx.clearRect(0,0,canvas.width,canvas.height); 225 | step++; 226 | //画3个不同颜色的矩形 227 | for(var j = lines.length - 1; j >= 0; j--) { 228 | ctx.fillStyle = lines[j]; 229 | //每个矩形的角度都不同，每个之间相差45度 230 | var angle = (step+j*45)*Math.PI/180; 231 | var deltaHeight = Math.sin(angle) * 50; 232 | var deltaHeightRight = Math.cos(angle) * 50; 233 | ctx.beginPath(); 234 | ctx.moveTo(0, canvas.height/2+deltaHeight); 235 | ctx.bezierCurveTo(canvas.width /2, canvas.height/2+deltaHeight-50, canvas.width / 2, canvas.height/2+deltaHeightRight-50, canvas.width, canvas.height/2+deltaHeightRight); 236 | ctx.lineTo(canvas.width, canvas.height); 237 | ctx.lineTo(0, canvas.height); 238 | ctx.lineTo(0, canvas.height/2+deltaHeight); 239 | ctx.closePath(); 240 | ctx.fill(); 241 | } 242 | requestAnimFrame(loop); 243 | } 244 | ``` 245 | 246 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/5.gif) 247 | 248 | 249 | 点击查看历史代码 250 | 251 | 252 | ####Step8.完成 253 | 254 | 255 | 删掉按钮与logo的HTML代码就大功告成了。 256 | 257 | 258 | ![效果图](https://raw.githubusercontent.com/cyclegtx/wave_background/gh-pages/images/1.gif) 259 | 260 | 261 | 代码在线预览 262 | 263 | 264 | ###如有问题或者建议请微博@UED天机。我会及时回复 265 | 266 | ========== 267 | 268 | ####相关阅读 269 | 1.[状动态背景](https://github.com/uedtianji/dynamic_background) 270 | 271 | 更多教程请访问：[ued.sexy](http://ued.sexy) -------------------------------------------------------------------------------- /assets/css/index.css: -------------------------------------------------------------------------------- 1 | /* ---------------------------------- 2 | * doc 3 | * ---------------------------------- */ 4 | html.no-scroll, 5 | body.no-scroll { 6 | height: 100%; 7 | overflow: hidden; 8 | } 9 | body{ 10 | background-color: #f9f9f9; 11 | } 12 | .doc { 13 | position: relative; 14 | margin: 0 auto; 15 | width: 320px; 16 | height: 640px; 17 | } 18 | .doc--bg1{ 19 | background-color: #030303; 20 | background-image: url(../img/image/bg.jpg); 21 | background-position: 0 0; 22 | background-repeat: repeat; 23 | } 24 | .doc--bg2{ 25 | background-color: #ffffff; 26 | /* background-image: url(../img/image/bg2.jpg); */ 27 | background-position: 0 0; 28 | background-repeat: no-repeat; 29 | background-size: cover; 30 | } 31 | @media only screen and (max-width: 768px) { 32 | .doc { 33 | width: 100%; 34 | max-width: 640px; 35 | } 36 | } 37 | /* ---------------------------------- 38 | * icon 39 | * ---------------------------------- */ 40 | [class^="icon-"], 41 | [class*=" icon-"] { 42 | display: inline-block; 43 | vertical-align: top; 44 | background-size: 100% auto; 45 | background-repeat: no-repeat; 46 | background-position: 50% 50%; 47 | font-style: normal; 48 | } 49 | .icon-chan1{ 50 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0RFM0RFQUVGNjkzMTFFMzhCMDVGMzVCOEU3MDcxNTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0RFM0RFQUZGNjkzMTFFMzhCMDVGMzVCOEU3MDcxNTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDREUzREVBQ0Y2OTMxMUUzOEIwNUYzNUI4RTcwNzE1MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDREUzREVBREY2OTMxMUUzOEIwNUYzNUI4RTcwNzE1MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrSRqEoAAAhMSURBVHja3FsJUFZV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); 51 | } 52 | .icon-chan2{ 53 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDhEQ0YyQTNGNjkzMTFFM0FCRkNBNTk3MjI0NzQ4N0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDhEQ0YyQTRGNjkzMTFFM0FCRkNBNTk3MjI0NzQ4N0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOERDRjJBMUY2OTMxMUUzQUJGQ0E1OTcyMjQ3NDg3QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOERDRjJBMkY2OTMxMUUzQUJGQ0E1OTcyMjQ3NDg3QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn6PxmwAAAabSURBVHja3FtrTBxV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); 54 | } 55 | .icon-chan3{ 56 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTFFMkZGMDhGNjkzMTFFM0I4OTBDM0I5MDY2MzAwMUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTFFMkZGMDlGNjkzMTFFM0I4OTBDM0I5MDY2MzAwMUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMUUyRkYwNkY2OTMxMUUzQjg5MEMzQjkwNjYzMDAxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMUUyRkYwN0Y2OTMxMUUzQjg5MEMzQjkwNjYzMDAxRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pr15j7MAAAZfSURBVHja5FtrTFxF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); 57 | } 58 | .icon-repast{ 59 | width: 48px; 60 | height: 48px; 61 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkRFN0NBNkJGNjlBMTFFM0FFRTdDQTEyMTc2QkY2RUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkRFN0NBNkNGNjlBMTFFM0FFRTdDQTEyMTc2QkY2RUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2REU3Q0E2OUY2OUExMUUzQUVFN0NBMTIxNzZCRjZFRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2REU3Q0E2QUY2OUExMUUzQUVFN0NBMTIxNzZCRjZFRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PijtLwYAAAOnSURBVHja7JxJaBNRHMZf0thaRKtVq8UFrMUFRcRKtVgEQRCsWBQUhB4EQRHx5kFBRFDEi4In7cWDCIKKIkJxQUEpohQRFxpBIcSl1l5EpDXpkvH7Mw8cY0kmM3lJM/k++JXJbH15v9kyM+8py7KUIerAdTAAzoMqPT4E1oEeEAXbHcuEwSHQB+6AuY5p9eAG+AJO6Hm9lm022A/u6/X9BP2gGxwDDQbr5R9MrnwnSFh2pEKb9PgKcE6PHwM3QaWeNge80NOGwC6HmN1gWE/7CBo9lEnkN4N7jrKlZ0RvHO0+JbsirMxlCajSwzPBYj0ccQyHQCOYqj9PB/P1cKVeh3O+SfpzHViQY3lkHS3gCtjiKFt6pHxrQSfYowzHpIBQls+5LuNlfc7UgzNgqcv5RfJJsKZUBUykVIAdYGOOG9AicEDvjRTgI1NAu4e9RupnM1hGAf4OhQvBCo/LyqFrNQX4EzAL1Pioo2oK8Be5yprsY3mLAvwl4uH4X5CUi4AJGwqgAApgKIACGAqgAIYCKIChAApgyliA5XFaySZSoP8jjwQ7QJOyH++t1OPlDuU8cAoMgVowzbFxyMPzGj3cTAH+BGzTpEcelhwcZ7zIadXwEMRQAAUwFEABTOkIsFi9xRXQb1DCKEhSQOZ8AL8M7VkiN04BmfPJUCWJgHfgOwVkzldwWR8u8pkBcAmMUEDmpJTdGOJWHtc5CC6Ax0E5CZu+F/QDHAF9YK+yW8B4PezEwFlwNUhXQaYFSMV9BkdBF9gEliu7oUSty5PtI/AaPARvgnZ5W6i7oUldgYK8qXwNtLkQ8ADsA2P8HZC/DOdwYh4NcuXzVgQFMBRAARTAUAAFMBRAAQwFUABDARTAUAAFMBRAAUwBEimT75kA3xwbnDzulEYjM5TBDvkowI68HtOt7M73lEOAVP5FZbA/OAr4G3lF8n3aOGka9ZvnAJ6EGQqgAIYCKIChAApgKIACGAqgAIYCKIChAApgKIACGAqgAIYCKIChAApgKIACGAqgAIYCKMBXQnmez3Q5AiVA3s1PuJw3YbAc0hVashwFyBePuRQVM1iOwRzWnwraHtCrsnc/KVt/1PCG8NbFfNK4Ix40AU9BT5Z5pFnRc4PlkK36LniVRdJt8MxcbVhWMQiDNhC3/k8K9ILWApVjK4iOU44k6AINJssQkj9FirRS3ACOg/WgWu/uT8Bp8LKAV2SrwGHQouzGe9Lbr/T026ns3nuN5Y8AAwA7sAOGw3F5AgAAAABJRU5ErkJggg==); 62 | } 63 | .icon-fallow{ 64 | width: 27px; 65 | height: 27px; 66 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0JFMzQ2N0NGNjlBMTFFM0E3QjJBMjNFMjQyNUE0NzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0JFMzQ2N0RGNjlBMTFFM0E3QjJBMjNFMjQyNUE0NzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QkUzNDY3QUY2OUExMUUzQTdCMkEyM0UyNDI1QTQ3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3QkUzNDY3QkY2OUExMUUzQTdCMkEyM0UyNDI1QTQ3NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgm85w8AAATeSURBVHja1Jp5SFRBHMdXDSu1NCtTKssOusmojE47qeyGQOiCQjosKjqhgqD7FoOCToqgoPyji4LK6BA6jLIDiojsNIko005Jt+/QT3i8ZubN7L7ZdX/wQXffvDfzm+M33/m9DfN6vZ4AWBhYB2LBImC80joBcKouOASm0ucGIAtUGa2VjZhBGoFr3v/tFIg0WXeYwamYAi6AjoLrF8Fk8MPI3DfkWBo4BxIcyt0A40C52w0IN+DUJHBNwSlmg0A+aFzbHVsMToH6Gvf0AtdBUm0MHhFgt9c/ewFa16bgEQ2Og/Eu9PM7MAI8C3bwSARnQW8XJ9FHMAo8CNYa6wJuueyUh4LOVdAvGI4NBTdBa0N7YBy4BIYH0rEZtLk2MizF2No9DyaYdowJ2bXgCIj0BMaYzsyz6Ewj4T7HGzyrAnN1wr3OiO0GRZ7gGGvnXrDC1AZdF2ynHgyWbTC5QTORuw+kBmH0SmirKfMneIj0213av2aDtwF06hUpkzJ/pmIy2Kow7PXAQlBscPp9B9tAQ1u9wnbJGnwe7NAUwhkgjxrir/0A+SAbxHHqW0IndG57RDmPkWAMeKwxTaroxMyIAumkUHqAbpLz2WdQSmvnOQng+6AQVErqawpWgeU6U7GQem2P4PpoH3IWbOokgRTq6Vg/jyY7aGYkqO5jw+jwxyxe0FsTwTLNhf8LfADF4Av4qnGCSBCMGJsZ2apRcY7l/xaCymIoTzjacBRkqbrT4A/nWlv6m8VLI4ZzGjzO8rmjJOxGUKULDeVOksEV0JLWob3dXen/5mCg0xobz4lO7ThzuDuotpQpAnOobITmWqlv+8zW4HpQQc8+yLknzdbGXKdwv5njmEh8HhOE6V9gGaij6NhK8B48BKUc8duTc89WW7knTo6d5jS0QNCgKLAFfKRyr0hHttIcsTAaoWpO3Zs45Vk0LuF0QLTMsduCUeihsDnLrieCWWC6TT1YSaUQfh1cprK8ctmCNnaSOfZIcNMNEO7jfjMAlFme9QmM8fFZiXQ/zwbK9jHR3sKizkYfIls6KZFYy3cs63uGMsY6FkWnaVHWuKEsKp5w0G/7aW2p6MaloFLyLHZtMa0xp+fF0xSV2WDZVFyuIE5fUoOSOQ1oBmaDxxpilzW4j8SpsYonhxTZQTNVM1FZQpTTRtnej826iDbkYssGnUEC2smYRGsCqmWZ4Cd0Qg0lOwkynbRijoGKf1qXtYHnH1URwUc1z2Equfhdls+HXXbuHiVwHR1jSnqmQFHrWhVljq0hmnXaAZecYs9fwO0oSTSa50KSs0Y93LR8v4dkUb4L6YMVvuQ8PKThfDEmhCdbtGC55VohfR8DLvjhVK6vyZwa5lNDVe25TZG3sV3/bckwRdCeWKHZaaud2q2q0Tor7PwVVKH9fJXppOtAE7r3vkDlfwFnSQDHm8gE9/X8+21GH8pDsDD+lH76wPTfN849O8ES23csSi6VvD5qS9rvJ0XVd7qR1OQPWGqsAPS3fcfURRuTlZp2LJryFZGC/H+hydczJm2Q5CVhlun3TiZtiOTaFEqvhaRjssNkDCmckFtjbA3dcSjzho46laE0YiovxNmZa1oojVgchfQ4hbKvQQfwOxRGbI2iU8xakUKv1SPGOmoeyKXcvqqV06iVutWQvwIMAKlonHIyYXPBAAAAAElFTkSuQmCC); 67 | } 68 | .icon-shop{ 69 | width: 34px; 70 | height: 34px; 71 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODk1NDMxMzdGNjlBMTFFM0JFMzU4MEE0QzIwQzIxQzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODk1NDMxMzhGNjlBMTFFM0JFMzU4MEE0QzIwQzIxQzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4OTU0MzEzNUY2OUExMUUzQkUzNTgwQTRDMjBDMjFDMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4OTU0MzEzNkY2OUExMUUzQkUzNTgwQTRDMjBDMjFDMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtjaFLQAAAUFSURBVHja7JtJaBRBFIa7ezITTYzGBZ0kxkQTNWaiUREEF9xABfEqCKKg6EHFoyAiKOLJi2fRkyh4EMUV8eB+UAziAioS17gFxQ3jmoz/G19j01b19DI9prvy4COke7q66p9Xr1697tGz2axWREuBZjAfzAATwDDQj89/AW/AHXAZnAePQE+xOqgXSRADLAIbwVSQdnENdewJuAr2gLaiKEKChEw52A6+ZP1ZD3gB1hahr6ELUgb2ZQtjP8DWsAUxQnS+ErAerMnzuW7wi3GKFUmwBSyLYgwhoeeCo2CgIDZ0gnMcHzpYDLJSMAbMA3Mk11KQXQruRSmGpMAhgdt3g3NgSp7rk2ARuCuZOjujFEPI6xrAS4kYVR7amSwQhYLsDVARlRhCbc4EVbbjn8AO8Mqt83I+sss+zUEGTA9rrofR5gzbMQqWl8AVj21RwD0jyEESLHokBElxBmoX5JrP9rrAXUG/J0ZFkEFghMD93/qN+5yx2qcN3aN/bxeEOloBBkiWWr+CdAjuU8n36vUeUm7ZrFmnzMcAgnwQHKd7lEVBkCQHPbsg3wMI8k2SCaeiIIio3R5LNurHfkruofd2QejbfGHLNcxjzwK0+ZTrJNZjLz3kNP81dU+AFaADdIF2sDJgmyVgE3jFbd4HS8LIVMPa3JErjwOj2DMeFMibmzkDpg1ee5QrZpGxEg/feANvx6Oo4HtBcudbEPrMZi72pFwKoluCX1hTUvPQF8qBdoO9QacMzdsF4GQYa36RjbYOi/MVq/N5iLmVdysGqftY+/P4oIsr7IXclVIuc5HLAkP5y6p2ee1A3oW3BVl2S8ERl0XgX+AAqLNV3DeCzwUoMr8Gy3kJNgtIreCEy+t/gr1BK2ZpcNvFzagadllSxaIBbAsoBuUe6yV9rJWUGkV9vMBPAnxVzCgY1YB6l4WcA+Cz5Nwh8DxApvoQHJacfw0OusxjqICd9pu607kml1vsbk6vZQPqDLj9p7T9neR8j9slFTYcjPcriO6hKpXgPEXWTpWH4Ce6fiQPRjaGRg9tjQniIXUeErzVgkqZeW6d9m/R2YsgNOA1DgNc5aGtar+rDAWfix4CHwWt42CSZRWo4oD6tQCrzDuwAVRy+waY5bGPtBIe87O5M5W/orl7Um+f722ch2R4Q1Yoo3hxizeLQ8A0/uulf/fBbFlMkglC02UhOBViEel/GZUj6dWM615iCB1viaEYGtdhM16Dqs6CxNEMp7EZDnl/U4wFoQdpSbeCmEtTXUwFofGNli0WhsO6n46xINUsiitBTJeKs/WTjVEmSGvMBZGm+4ZkXzIi5oLosjGKBBkMahXwEJoy/fMJonP9o1YBD6kXraSG4P+MbI2OmVWIAqvIQ1o1NYzGPimfIEkFllzr2JudBDErW40KCTLOXj4wBCntcEUEMR2g3kmQCdq/r0PF2SrtIcJQZMvvOo5YBSlXKKBanWCUTJAyheKHdfwUR0rtgugsRlpBD2m07musgoznIKOaIOQIY+2CCLM2RSxhHbuh8Apj1aDFLshgrbAPlKImSMYMrIYlQ61RWJBasxRgaH+LJWWaukYzpMnqIS2a2pbgaZMTpFRzeLSnmCApEqRCwYRMtvMdYHAyNqRPkNxrnoPM5xM1fYLkNnmN5hqc0Pos95qEoeD+xclLKkmQm31a5Ix+13eT3hA8DfaD5Vo0f/pRCPsB9oGzvwUYANVdy5dvm6mlAAAAAElFTkSuQmCC); 72 | } 73 | .icon-load{ 74 | width: 12px; 75 | height: 16px; 76 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAfCAYAAAD9cg1AAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTM4Qjg4NDZGNkIyMTFFMzk4REE5MkExRkM2QkMyRUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTM4Qjg4NDdGNkIyMTFFMzk4REE5MkExRkM2QkMyRUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzhCODg0NEY2QjIxMUUzOThEQTkyQTFGQzZCQzJFRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzhCODg0NUY2QjIxMUUzOThEQTkyQTFGQzZCQzJFRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu1S6UwAAAJgSURBVHjatJZdiE1RFMf3PXNTjI+8TU0axpuUCVET0shHPnKTmJKEUj4eNG9eRh54NQ2aZh7uwxASdQupCVHChKjBNAkPcrvTaMSV8uBevzWtU8dt733Onbnzr1/N3LPW+u+9z157n1S5XDaiXC5nHFoEq2F7xe9/4Ba8gtFMJmNNThu3GuEwHIQmSFliDsAw9DLAq5iMVwYEjuJtcBfOwEJHcVEdLIULMIDJniQGHXAblpnqtAKymOz1GSyBTphlJqd66MNkp81AinbBPDM1zZVBYjKn0mCDrr1PL3X5hmPilsPE+0jJNsVtpuxU2ORI+AGn4Dp8hwY4pLus2ZHzDLaEM1gL6x2BRTgKPVpcVIBzsBXeOfJWyQ4LInt+hiPwLFxzPBuB81CyPJPai0ODv44Cn+FKzHrficwsKumdbUFM8jf4GhNT53lWijNo0LPIp7Kn09NBZDo2LYB9MQa7Hb0jxh9Cg5KnwBE97GxqgZOOZRKDe6HBI/jimUW/NqF052yYD7u0L5o9728sPK7z8EKL2bROd8trna1s6ZWe01jUz/E9MhHAH7JNe+GnJ0G6vRXWaBP5io/rrP8LGoCLpjbKMugh23HdDfenWFxGftp1H4zqNfhkksVvwAlG/9t3o+X1EDsGbxIWLujA9lO8mOTSL+rpeRPaYSPscMRdhksUfl/tV4VoTC/0QdhsOXFlSY77CgQJl+AtPLZ06oO4xKQG8tKyFb8N6qdNTQyMdno+8v/DmMas2uBj5GYr6PqbWhqE3S56CkPTYSCFn2sjlpIkpKs0+KWflp+SJvwTYAD/Qo2v+/Z27QAAAABJRU5ErkJggg==); 77 | } 78 | .icon-tel{ 79 | width: 12px; 80 | height: 13px; 81 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODg4QTlBQjVGNkIyMTFFMzgwRUQ4MEZFRTBDMEVDNTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODg4QTlBQjZGNkIyMTFFMzgwRUQ4MEZFRTBDMEVDNTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4ODhBOUFCM0Y2QjIxMUUzODBFRDgwRkVFMEMwRUM1MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4ODhBOUFCNEY2QjIxMUUzODBFRDgwRkVFMEMwRUM1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoBw61gAAAJuSURBVHjalJZNiMxhHMf/81J2kR07jiTKS8mBdTMtsSFJ4yV2W4cdB7lS2l1usuIiJxsSibIHGmpLK62XE4q9KMuBwmntwbYTl5m/z1Pfv559PI+Z+dVn5v9/fm/Py+/3zKTiOI6MlMvlyJFFsBW6YCMshYWQgln4Cm/hKTwrFos/I4+kPAnycByOwsqoMfkMN2GYRD9sRdoxPACv4VwTwY2sgLPGl4ke/GcFDJpEQzAQCPAB3mlbjCyDDbA2YH8RzrCaalYD56HfY/geTsIL+O3oWqATLsE6R2diZeBUskU9gZm8hDFP8EhjY7LxySHzkawgDhh90vd8OAbb9W4q5zpU4GPAN7YTTMFyx+AWXIU2eAhbLN0e2Ad74Rqsh5LjP2VX0Qnt9wyMq/ZLmuESJ3gindJVVNJd8p2xzm5OH7SqB75ZJWxmacrusBrM3YIRuA8PqJia4piGnOb9V6jRjCyGO7C7wT54DEcIOu0q0h5js4pHTQQ3ssucE5PM10uQ14EWPEHM/l4Q4x79Zl8SO0G72SkZ2vIddsI2GBTmeYd0bhJylNvnJGAgF5i5qZD9aqghXRmTen6iIqg4PgWtJGevoD+wLSO6/K7AaVgDq/U8DG/gnsevkNxrSYLuwOGNqqJKHl2fdKMB3247QS5gZH5YFsA8j65FutmAb5udoBYw6lDjTXh0E9J1BHxroT6wpaSLrk8HnMikdK2B7fsr2ToJVsEN6NWdn9xJz3VV3NWhByXdQJeaw3qlJF9Er8Z66jknK0jVsdsEt6Gq90wDE0vZCbIN3jmZJu6nrB34sv6qNBPgf1LVj1X0R4ABAH5Opay5Q6k9AAAAAElFTkSuQmCC); 82 | } 83 | .icon-phone{ 84 | width: 14px; 85 | height: 14px; 86 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUZFN0EzMjJGNkIzMTFFM0FCRDhGMzY5RTQ3ODRFRjgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUZFN0EzMjNGNkIzMTFFM0FCRDhGMzY5RTQ3ODRFRjgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1RkU3QTMyMEY2QjMxMUUzQUJEOEYzNjlFNDc4NEVGOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1RkU3QTMyMUY2QjMxMUUzQUJEOEYzNjlFNDc4NEVGOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiQQS64AAAIlSURBVHjarJdNSFRRFMdn/CAUiaIgEV1kuZigxbgWQZ0QKWiZUVBRrQyiMMxNsxIDUdSUcmMkUboUQkKDqIU7DcEigiAloXJRLvzIoOfvyBkYHu/Oe8OcAz8uzDlz/3POvefeO3HP82JiV940VjBchjZIwDzcfJZ6/0/9sUKMefbHEp3sMMMEnMuKOQaLMBwztCLERLTTJyZ2EK7iP2oqCHVwx+E/BbcRjVsKXoIyh/8AXIDTloItITFSgW6osBKsjBDXDA1WgrsR4j7CdyvBryExc3APlq0EZx2+LZiEazTtguWmmYHtAN8S3EBszboPpaTvAnz/1R+zFpSJnwf4knDLXJCSeboxVn2+crjOKZOwzlBsHQYC/MfhAaLlpoKa5Uv4EOA/Dx3WGYroL4b7sOOLkXO2S89UO8GsJu8JiDuiJW+PMGedXuLxUEEt7SN4GhBbBUOaratdZGePwRO90JP+gHjmiZFtbJJqhhFdP79twjT0+o47+UHj0Jr12WeYgsck89MpqKInGQbhrCObL1IUzdrTzC5CsS/uL3zSHzPmFFRRWY8+R6aZbGVnl0K9ji7bkMrkFFTRGoa0HAIGm3QlVFBFD2kvpkOyCLPXkQ5nFvwPQ7++7BYLEHyVz22wo30qm+gufMtTTO7dFyV5fknq/0NbRo7CM3oYNOV4+clFPgoPqdTvSGuY46lfpK/3Ws08BSd0naXv3kpW0o+Zvwx7AgwAqOuYGl0g+CgAAAAASUVORK5CYII=); 87 | } 88 | /* ---------------------------------- 89 | * slign 90 | * ---------------------------------- */ 91 | .slign{ 92 | border-bottom: 3px solid rgba(0,0,0,.3); 93 | } 94 | /* ---------------------------------- 95 | * logo 96 | * ---------------------------------- */ 97 | .logo{ 98 | padding: 65px 26px 0; 99 | } 100 | /* ---------------------------------- 101 | * sohonav 102 | * ---------------------------------- */ 103 | .sohonav{ 104 | position: relative; 105 | margin-top: 50px; 106 | z-index: 2; 107 | } 108 | .sohonav .item{ 109 | position: absolute; 110 | display: block; 111 | text-align: center; 112 | color: #fff; 113 | border-color: #fff; 114 | border-style: solid; 115 | border-width: 0px; 116 | box-shadow: 1px 1px 3px rgba(0,0,0,.3); 117 | -webkit-transition: all 0.3s ease-out; 118 | transition: all 0.3s east-out; 119 | } 120 | .sohonav .item:nth-child(1){ 121 | width: 132px; 122 | height: 132px; 123 | font-size: 19px; 124 | padding-top: 25px; 125 | line-height: 50px; 126 | background-color: #ff6547; 127 | border-radius: 66px; 128 | left: 15%; 129 | top:0; 130 | } 131 | .sohonav .item:nth-child(2){ 132 | width: 84px; 133 | height: 84px; 134 | font-size: 12px; 135 | padding-top: 15px; 136 | line-height: 28px; 137 | background-color: #00b7ee; 138 | border-radius: 42px; 139 | left: 70%; 140 | top: 75px; 141 | } 142 | .sohonav .item:nth-child(3){ 143 | width: 106px; 144 | height: 106px; 145 | font-size: 19px; 146 | padding-top: 20px; 147 | line-height: 38px; 148 | background-color: #ffcc5f; 149 | border-radius: 53px; 150 | left: 25%; 151 | top: 165px; 152 | } 153 | .sohonav .item:hover, 154 | .sohonav .item:active{ 155 | border-width: 4px; 156 | box-shadow: 1px 1px 5px rgba(0,0,0,.5); 157 | } 158 | /* ---------------------------------- 159 | * channel 160 | * ---------------------------------- */ 161 | .channel{ 162 | position: relative; 163 | padding: 10px 0 10px 58px; 164 | } 165 | .channel .line{ 166 | position: absolute; 167 | left: 26px; 168 | top: -38px; 169 | bottom: 0; 170 | width: 4px; 171 | background-color: #ddd; 172 | } 173 | .channel .line:before{ 174 | position: absolute; 175 | left: -5px; 176 | top:0; 177 | content: ''; 178 | width: 14px; 179 | height: 14px; 180 | border-radius: 7px; 181 | background-color: #ddd; 182 | } 183 | .channel .item{ 184 | position: relative; 185 | z-index: 1; 186 | padding: 12px 0; 187 | color: #666; 188 | font-size: 12px; 189 | line-height: 20px; 190 | border-top:1px solid #ddd; 191 | } 192 | .channel .item:first-child{ 193 | border-top: 0; 194 | } 195 | .channel .item .bar{ 196 | position: absolute; 197 | left: -48px; 198 | top: 50%; 199 | margin-top: -18px; 200 | padding: 3px; 201 | width: 36px; 202 | height: 36px; 203 | border-radius: 18px; 204 | background-color: #f9f9f9; 205 | } 206 | .channel .item .bar [class^="icon-"]{ 207 | width: 30px; 208 | height: 30px; 209 | } 210 | /* ---------------------------------- 211 | * merchant 212 | * ---------------------------------- */ 213 | .merchant{ 214 | padding-bottom: 15px; 215 | } 216 | .merchant .item{ 217 | position: relative; 218 | padding: 8px 10px 0 110px; 219 | height: 100px; 220 | border-top: 1px solid #fff; 221 | border-bottom: 1px solid #e0e0df; 222 | } 223 | .merchant .item .photo{ 224 | position: absolute; 225 | left: 10px; 226 | top:8px; 227 | width: 90px; 228 | height: 82px; 229 | } 230 | .merchant .item .photo img{ 231 | border-radius:3px; 232 | } 233 | .merchant .item .title{ 234 | color: #383838; 235 | line-height: 20px; 236 | margin-bottom: 5px; 237 | } 238 | .merchant .item .load, 239 | .merchant .item .tel{ 240 | position: relative; 241 | padding-left: 18px; 242 | font-size: 12px; 243 | line-height: 16px; 244 | color: #999; 245 | } 246 | .merchant .item .load{ 247 | height: 32px; 248 | overflow: hidden; 249 | margin-bottom: 8px; 250 | } 251 | .merchant .item .load [class^="icon-"], 252 | .merchant .item .tel [class^="icon-"]{ 253 | position: absolute; 254 | left: 0; 255 | top: 0; 256 | } 257 | .merchant .item .btn{ 258 | position: absolute; 259 | right: 10px; 260 | bottom: 5px; 261 | width: 40px; 262 | } 263 | /* ---------------------------------- 264 | * soho 265 | * ---------------------------------- */ 266 | .soho{ 267 | padding: 15px 10px 0; 268 | } 269 | .soho .cell{ 270 | width: 50%; 271 | float: left; 272 | padding: 0 2px 6px 8px; 273 | margin-bottom: 12px; 274 | } 275 | .soho .cell .photo{ 276 | display: block; 277 | position: relative; 278 | } 279 | .soho .cell .photo::before, 280 | .soho .cell .photo::after{ 281 | content: ''; 282 | display: block; 283 | position: absolute; 284 | } 285 | .soho .cell .photo::before{ 286 | left: -6px; 287 | top:3px; 288 | width: 6px; 289 | height: 100%; 290 | background-color: #fe0138; 291 | transform:skew(0deg,-45deg); 292 | -moz-transform:skew(0deg,-45deg); 293 | -webkit-transform:skew(0deg,-45deg); 294 | } 295 | .soho .cell .photo::after{ 296 | left: -3px; 297 | bottom: -6px; 298 | width: 100%; 299 | height: 6px; 300 | background-color: #ae012b; 301 | transform:skew(-45deg,0deg); 302 | -moz-transform:skew(-45deg,0deg); 303 | -webkit-transform:skew(-45deg,0deg); 304 | } 305 | 306 | .soho .cell:hover .photo, 307 | .soho .cell:active .photo{ 308 | left: -4px; 309 | bottom: -4px; 310 | outline: none; 311 | } 312 | .soho .cell:hover .photo::before, 313 | .soho .cell:active .photo::before{ 314 | left: -2px; 315 | top:1px; 316 | width: 2px; 317 | } 318 | .soho .cell:hover .photo::after, 319 | .soho .cell:active .photo::after{ 320 | left: -1px; 321 | bottom: -2px; 322 | height: 2px; 323 | } 324 | 325 | .soho .cell .photo .name{ 326 | position: absolute; 327 | left: 0; 328 | top: 0; 329 | width: 100%; 330 | height: 100%; 331 | color: #fff; 332 | text-align: center; 333 | } 334 | .soho .cell .photo .name > div{ 335 | display: inline-block; 336 | } 337 | .soho .cell .photo .name span{ 338 | display: block; 339 | font-size: 16px; 340 | font-weight: bold; 341 | line-height: 1; 342 | } 343 | .soho .cell .photo .name code{ 344 | font-size: 10px; 345 | line-height: 1.2; 346 | } --------------------------------------------------------------------------------