首页 > 代码库 > PostCSS 实战
PostCSS 实战
专题截图：
项目截图：
目录说明:
dest/ 发布代码文件夹；
src/ 预编译代码文件夹;
node_modules node 插件;
gulpfile.js gulp的配置文件;
package.json npm 配置文件;
src/待编译文件夹:
c/ css文件目录;
i/ img文件目录;
dest/发布文件夹:
c/ css文件目录;
i/ img文件目录;
package.json 文件展示：
1 { 2 "name": "may-topic", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "autoprefixer": "^6.7.0", 13 "cssnano": "^3.10.0", 14 "cssnext": "^1.8.4", 15 "gulp": "^3.9.1", 16 "gulp-connect": "^5.0.0", 17 "gulp-imagemin": "^3.1.1", 18 "gulp-livereload": "^3.8.1", 19 "gulp-postcss": "^6.3.0", 20 "imagemin-pngquant": "^5.0.0", 21 "postcss-alias": "^1.0.0", 22 "postcss-clearfix": "^1.0.0", 23 "postcss-css-variables": "^0.6.0", 24 "postcss-mixins": "^5.4.1", 25 "postcss-nested": "^1.0.0", 26 "postcss-sass-extend": "0.0.1", 27 "precss": "^1.4.0" 28 }, 29 "dependencies": { 30 "gulp-imagemin": "^3.1.1", 31 "imagemin-pngquant": "^5.0.0" 32 } 33 }
gulpfile.js文件展示：
1 ‘use strict‘; 2 let gulp = require(‘gulp‘); //gulp 3 let postcss = require(‘gulp-postcss‘); //gulp-postcss； 4 let precss = require(‘precss‘); //postcss插件任务数组; 5 let cssnext = require(‘cssnext‘); //未来css新语法; 6 let cssnano = require(‘cssnano‘); //CSS优化的插件包 7 let autoprefixer = require(‘autoprefixer‘); //添加css3 前缀; 8 let alias = require(‘postcss-alias‘); //css 别名设置; 9 let crip = require(‘postcss-crip‘); //css 简写; 10 let nested = require(‘postcss-nested‘); //css 嵌套； 11 let clearfix = require(‘postcss-clearfix‘); //css 清浮动; 12 let mixins = require(‘postcss-mixins‘); //混合宏; 13 let extend = require(‘postcss-sass-extend‘); //extend插件; 14 let variables = require(‘postcss-css-variables‘); //变量插件; 15 16 /* 本地服务 */ 17 let port = 8000;//端口号; 18 let connect = require(‘gulp-connect‘); //本地Server服务； 19 let livereload = require(‘gulp-livereload‘); //刷新浏览器(同时chrome安装LiveReload插件);; 20 21 /* 启动服务器 */ 22 gulp.task(‘webserver‘,function(){ 23 connect.server({ 24 port : port, 25 livereload:true 26 }); 27 }); 28 29 //css处理; 30 gulp.task(‘css‘, function () { 31 32 //设置css路径; 33 let [cssSrc,cssDst] = [‘./src/c/*.css‘,‘./dest/c/‘]; 34 35 //postcss插件数组; 36 let processors =[ 37 autoprefixer({ browsers: [‘> 1%‘, ‘IE 7‘], cascade: false }), 38 cssnext, 39 alias, 40 crip, 41 clearfix, 42 nested, 43 mixins, 44 variables, 45 extend, 46 cssnano 47 ]; 48 49 return gulp.src( cssSrc ) 50 .pipe(postcss(processors)) 51 .pipe( gulp.dest(cssDst) ); 52 53 }); 54 55 //HTML处理 56 gulp.task(‘html‘, function() { 57 58 //设置路径； 59 let [htmlSrc,htmlDst] = [‘./src/*.html‘,‘./dest/‘]; 60 61 gulp.src(htmlSrc) 62 .pipe( gulp.dest(htmlDst) ) 63 .pipe(livereload()); 64 }); 65 66 //压缩图片 67 var imagemin = require(‘gulp-imagemin‘); // 压缩图片 $ npm i -D gulp-imagemin; 68 var pngquant = require(‘imagemin-pngquant‘); // 压缩图片 $ npm i -D imagemin-pngquant; 69 gulp.task(‘img‘, function(){ 70 71 //设置img路径; 72 let [imgSrc,imgDst] = [‘./src/i/‘,‘./dest/i/‘]; //图片路径； 73 74 return gulp.src( imgSrc + ‘*.{png,jpg,gif,ico}‘ ) 75 .pipe(imagemin({ 76 optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） 77 progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 78 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 79 multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化 80 svgoPlugins: [ 81 {removeViewBox: false} //不要移除svg的viewbox属性 82 ], 83 use: [pngquant({quality: ‘65-80‘})] //使用pngquant深度压缩png图片的imagemin插件/quality 压缩的比例最好60-80之间; 84 })) 85 .pipe(gulp.dest(imgDst)); 86 }); 87 88 //实时监听; 89 gulp.task(‘watch‘,function(){ 90 gulp.watch(‘src/c/*.css‘,[‘css‘]); 91 gulp.watch(‘src/*.html‘,[‘html‘]) 92 gulp.watch(‘src/i/*.*‘,[‘img‘]) 93 livereload.listen({start:true}); 94 }); 95 96 //添加默认事件; 97 gulp.task(‘default‘,function(){ 98 gulp.run(‘webserver‘,‘watch‘,‘html‘,‘img‘); 99 });
index.html 代码(其实也没啥好看的):
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" class="html-bg"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>五一专题</title> 6 <link rel="stylesheet" href="c/index.css"> 7 <!--[if lte IE 6]> 8 <script type="text/javascript" src="http://images.miuu.cn/w4/common/j/DD_belatedPNG_0.0.8a_IE6.js"></script> 9 <script type="text/javascript"> 10 DD_belatedPNG.fix(‘img,.ie6-img‘); 11 </script> 12 <![endif]--> 13 </head> 14 <body> 15 <div class="conter"> 16 <div class="welfare ie6-img"></div> 17 <div class="my-welfare"> 18 <div clss="my-welfareBg"></div> 19 <div class="my-wM clear"> 20 <div class="my-wl"> 21 <div class="my-wPic"> 22 <a href="#"> 23 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" width="59" height="72" /> 24 </a> 25 </div> 26 <div class="my-wPicTxt"> 27 <p> 28 我送出的桃花：1999只 29 </p> 30 <p> 31 我收到的桃花： 999只 32 </p> 33 <p> 34 我的排名：1999 35 </p> 36 </div> 37 </div> 38 <div class="my-wr"> 39 <a href="#" class="my-wrBtn ie6-img"></a> 40 </div> 41 </div> 42 </div> 43 <div class="my-sticker"> 44 <div class="my-stickerM clear"> 45 <div class="my-stl"> 46 <div class="my-stH ie6-img"> 47 多发多赢 48 </div> 49 <div class="my-stT"> 50 参与游戏可送出桃花1朵给每位收信用户，如果收信用户也参与了游戏您将收到桃花一朵，多发信才有可能多收桃花哦! 51 </div> 52 </div> 53 <div class="my-stl my-stc"> 54 <div class="my-stH ie6-img"> 55 送福利啦 56 </div> 57 <div class="my-stT"> 58 排行榜以收到桃花数计算，7日更新一次，男女会员<span class="color-red">第1名将会得到钻石会员1年＋免费体验线下xx吧一次的福利，2~5名会得到VIP一个月及免费体验一次xx吧的福利</span>，若已经是钻石会员的用户可以累计哦 59 </div> 60 </div> 61 <div class="my-stl my-str"> 62 <div class="my-stH ie6-img"> 63 参与有奖 64 </div> 65 <div class="my-stT"> 66 参与的用户均会获得50金豆/天 67 </div> 68 </div> 69 </div> 70 </div> 71 <div class="pink-bg my-chartMain"> 72 <div class="my-chartLine"> 73 <div class="my-line1"></div> 74 <div class="my-line2"></div> 75 <div class="chartLine "> 76 上期获奖名单 77 </div> 78 <div class="my-line3"></div> 79 <div class="my-line4"></div> 80 </div> 81 <div class="my-period"> 82 <span class="color-yellow">恭喜</span>用户男1和用户女1<span class="color-yellow">获得钻石会员＋xx吧免费体验一次</span><br/> 83 <span class="color-yellow">恭喜</span>， 84 用户男2，用户男3，用户男4，用户男5,用户女2，用户女3，用户女4，用户女5 <span class="color-yellow">获得VIP一个月＋xx吧免费体验一次</span> 85 </div> 86 </div> 87 <div class="pink-bg my-chartMain"> 88 <div class="strange-flower1 ie6-img"></div> 89 <div class="strange-flower2 ie6-img"></div> 90 <div class="my-chartLine"> 91 <div class="my-line1"></div> 92 <div class="my-line2"></div> 93 <div class="chartLine"> 94 <div class="chartLineflower1 ie6-img"></div> 95 <div class="chartLineflower2 ie6-img"></div> 96 桃花排行榜 97 </div> 98 <div class="my-line3"></div> 99 <div class="my-line4"></div> 100 </div> 101 <div class="my-welList clear"> 102 <div class="my-well"> 103 <div class="my-pinkLine ie6-img"> 104 男会员 105 </div> 106 <div class="lists"> 107 <div class="my-li clear"> 108 <div class="flowerOne"> 109 <div class="flowerTxt"> 110 1 111 </div> 112 <div class="flowerOne-top ie6-img ie6-img"></div> 113 <div class="flowerOne-bottom ie6-img ie6-img"></div> 114 </div> 115 <div class="my-lil"> 116 <div class="my-lilPic"> 117 <a href="#" class="my-lilPicM"> 118 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 119 <span> 120 1000+ 121 </span> 122 </a> 123 <a href="#" class="my-lilPicA"> 124 会员 125 </a> 126 </div> 127 </div> 128 <div class="my-lir"> 129 <p> 130 28岁 176厘米 131 </p> 132 <p> 133 北京门头沟 134 </p> 135 <p> 136 10000～20000元 137 </p> 138 <div class="btn-m"> 139 <a href="#" class="btn">写 信</a> 140 </div> 141 </div> 142 </div> 143 <div class="my-li clear"> 144 <div class="flowers"> 145 <div class="flowersTxt"> 146 2 147 </div> 148 <div class="flowers-top"></div> 149 <div class="flowers-bottom"></div> 150 </div> 151 <div class="my-lil"> 152 <div class="my-lilPic"> 153 <a href="#" class="my-lilPicM"> 154 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 155 <span> 156 1000+ 157 </span> 158 </a> 159 <a href="#" class="my-lilPicA"> 160 会员 161 </a> 162 </div> 163 </div> 164 <div class="my-lir"> 165 <p> 166 28岁 176厘米 167 </p> 168 <p> 169 北京门头沟 170 </p> 171 <p> 172 10000～20000元 173 </p> 174 <div class="btn-m"> 175 <a href="#" class="btn">写 信</a> 176 </div> 177 </div> 178 </div> 179 <div class="my-li clear"> 180 <div class="flowers"> 181 <div class="flowersTxt"> 182 3 183 </div> 184 <div class="flowers-top"></div> 185 <div class="flowers-bottom"></div> 186 </div> 187 <div class="my-lil"> 188 <div class="my-lilPic"> 189 <a href="#" class="my-lilPicM"> 190 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 191 <span> 192 1000+ 193 </span> 194 </a> 195 <a href="#" class="my-lilPicA"> 196 会员 197 </a> 198 </div> 199 </div> 200 <div class="my-lir"> 201 <p> 202 28岁 176厘米 203 </p> 204 <p> 205 北京门头沟 206 </p> 207 <p> 208 10000～20000元 209 </p> 210 <div class="btn-m"> 211 <a href="#" class="btn">写 信</a> 212 </div> 213 </div> 214 </div> 215 <div class="my-li clear"> 216 <div class="flowers"> 217 <div class="flowersTxt"> 218 4 219 </div> 220 <div class="flowers-top"></div> 221 <div class="flowers-bottom"></div> 222 </div> 223 <div class="my-lil"> 224 <div class="my-lilPic"> 225 <a href="#" class="my-lilPicM"> 226 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 227 <span> 228 1000+ 229 </span> 230 </a> 231 <a href="#" class="my-lilPicA"> 232 会员 233 </a> 234 </div> 235 </div> 236 <div class="my-lir"> 237 <p> 238 28岁 176厘米 239 </p> 240 <p> 241 北京门头沟 242 </p> 243 <p> 244 10000～20000元 245 </p> 246 <div class="btn-m"> 247 <a href="#" class="btn">写 信</a> 248 </div> 249 </div> 250 </div> 251 <div class="my-li clear"> 252 <div class="flowers"> 253 <div class="flowersTxt"> 254 5 255 </div> 256 <div class="flowers-top"></div> 257 <div class="flowers-bottom"></div> 258 </div> 259 <div class="my-lil"> 260 <div class="my-lilPic"> 261 <a href="#" class="my-lilPicM"> 262 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 263 <span> 264 1000+ 265 </span> 266 </a> 267 <a href="#" class="my-lilPicA"> 268 会员 269 </a> 270 </div> 271 </div> 272 <div class="my-lir"> 273 <p> 274 28岁 176厘米 275 </p> 276 <p> 277 北京门头沟 278 </p> 279 <p> 280 10000～20000元 281 </p> 282 <div class="btn-m"> 283 <a href="#" class="btn">写 信</a> 284 </div> 285 </div> 286 </div> 287 </div> 288 </div> 289 <div class="my-welr"> 290 <div class="my-pinkLine ie6-img"> 291 女会员 292 </div> 293 <div class="lists"> 294 <div class="my-li clear"> 295 <div class="flowerOne"> 296 <div class="flowerTxt"> 297 1 298 </div> 299 <div class="flowerOne-top ie6-img"></div> 300 <div class="flowerOne-bottom ie6-img"></div> 301 </div> 302 <div class="my-lil"> 303 <div class="my-lilPic"> 304 <a href="#" class="my-lilPicM"> 305 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 306 <span> 307 1000+ 308 </span> 309 </a> 310 <a href="#" class="my-lilPicA"> 311 会员 312 </a> 313 </div> 314 </div> 315 <div class="my-lir"> 316 <p> 317 28岁 176厘米 318 </p> 319 <p> 320 北京门头沟 321 </p> 322 <p> 323 10000～20000元 324 </p> 325 <div class="btn-m"> 326 <a href="#" class="btn">写 信</a> 327 </div> 328 </div> 329 </div> 330 <div class="my-li clear"> 331 <div class="flowers"> 332 <div class="flowersTxt"> 333 2 334 </div> 335 <div class="flowers-top"></div> 336 <div class="flowers-bottom"></div> 337 </div> 338 <div class="my-lil"> 339 <div class="my-lilPic"> 340 <a href="#" class="my-lilPicM"> 341 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 342 <span> 343 1000+ 344 </span> 345 </a> 346 <a href="#" class="my-lilPicA"> 347 会员 348 </a> 349 </div> 350 </div> 351 <div class="my-lir"> 352 <p> 353 28岁 176厘米 354 </p> 355 <p> 356 北京门头沟 357 </p> 358 <p> 359 10000～20000元 360 </p> 361 <div class="btn-m"> 362 <a href="#" class="btn">写 信</a> 363 </div> 364 </div> 365 </div> 366 <div class="my-li clear"> 367 <div class="flowers"> 368 <div class="flowersTxt"> 369 3 370 </div> 371 <div class="flowers-top"></div> 372 <div class="flowers-bottom"></div> 373 </div> 374 <div class="my-lil"> 375 <div class="my-lilPic"> 376 <a href="#" class="my-lilPicM"> 377 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 378 <span> 379 1000+ 380 </span> 381 </a> 382 <a href="#" class="my-lilPicA"> 383 会员 384 </a> 385 </div> 386 </div> 387 <div class="my-lir"> 388 <p> 389 28岁 176厘米 390 </p> 391 <p> 392 北京门头沟 393 </p> 394 <p> 395 10000～20000元 396 </p> 397 <div class="btn-m"> 398 <a href="#" class="btn">写 信</a> 399 </div> 400 </div> 401 </div> 402 <div class="my-li clear"> 403 <div class="flowers"> 404 <div class="flowersTxt"> 405 4 406 </div> 407 <div class="flowers-top"></div> 408 <div class="flowers-bottom"></div> 409 </div> 410 <div class="my-lil"> 411 <div class="my-lilPic"> 412 <a href="#" class="my-lilPicM"> 413 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 414 <span> 415 1000+ 416 </span> 417 </a> 418 <a href="#" class="my-lilPicA"> 419 会员 420 </a> 421 </div> 422 </div> 423 <div class="my-lir"> 424 <p> 425 28岁 176厘米 426 </p> 427 <p> 428 北京门头沟 429 </p> 430 <p> 431 10000～20000元 432 </p> 433 <div class="btn-m"> 434 <a href="#" class="btn">写 信</a> 435 </div> 436 </div> 437 </div> 438 <div class="my-li clear"> 439 <div class="flowers"> 440 <div class="flowersTxt"> 441 5 442 </div> 443 <div class="flowers-top"></div> 444 <div class="flowers-bottom"></div> 445 </div> 446 <div class="my-lil"> 447 <div class="my-lilPic"> 448 <a href="#" class="my-lilPicM"> 449 <img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92"> 450 <span> 451 1000+ 452 </span> 453 </a> 454 <a href="#" class="my-lilPicA"> 455 会员 456 </a> 457 </div> 458 </div> 459 <div class="my-lir"> 460 <p> 461 28岁 176厘米 462 </p> 463 <p> 464 北京门头沟 465 </p> 466 <p> 467 10000～20000元 468 </p> 469 <div class="btn-m"> 470 <a href="#" class="btn">写 信</a> 471 </div> 472 </div> 473 </div> 474 </div> 475 </div> 476 </div> 477 </div> 478 <div class="legend-welfare"> 479 <div class="strange-flower3 ie6-img"></div> 480 <h2> 481 活动说明 482 </h2> 483 <p> 484 1. 活动有效期内每7日更新一次排名，更新前保持第一名男女用户均会得到钻石会员1年＋xx吧免费<br/> 体验一次的福利，若已经是钻石会员的用户，将会再累计一年； 485 </p> 486 <p> 487 2. 2~5名用户均会得到VIP一个月的福利＋xx吧免费体验一次 488 </p> 489 <p> 490 3. 每日参与用户均会得到50金豆一次； 491 </p> 492 <p> 493 4. 用户发送桃花信，除收信方会收到一朵桃花外，若收信方也参与了游戏，发信方也会收到一朵桃花； 494 </p> 495 <p> 496 5. 排行榜更新后，前一期福利3个工作日内以站内信形式送出； 497 </p> 498 </div> 499 </div> 500 </body> 501 </html>
index.css(src/c/index.css) 预编译:
1 @define-mixin label{ 2 /* 清楚标签默认样式 */ 3 html {margin: 0; padding: 0; border: 0;} 4 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } 5 ol, ul, li { list-style: none; } 6 body {line-height: 1.5; background: white; font-family: ‘Microsoft Yahei‘, Arial, Helvetica, sans-serif; font-size: 12px; color: #333;} 7 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;} 8 caption, th, td { text-align: left; font-weight: normal; float: none !important; } 9 table, th, td, select, img, input,object{ vertical-align: middle;} 10 :focus { outline: 0;} 11 input,select{margin:0;} 12 a { color: #005EA7; text-decoration: none; } 13 a:hover { text-decoration:underline; } 14 p,a,td{word-wrap:break-word;word-break:break-all;} 15 img { border: none;vertical-align:top; } 16 textarea{ resize:none;border:1px solid #ccc;} 17 textarea:hover{border-color:#ccc;} 18 input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius: 0;font-family:‘Microsoft Yahei‘,‘黑体‘, Arial, Helvetica, sans-serif;} 19 input[type="text"]{border:solid 1px #ccc; border-radius:0;} 20 dfn {font-style: normal;font-family: Arial;} 21 } 22 23 @mixin label; 24 25 /*别名;*/ 26 @alias { 27 le:line-height; 28 } 29 30 /*定义变量;*/ 31 :root { 32 --conter:915px; 33 --fontSize: 1rem; 34 --mainColor: #12345678; 35 --highlightColor: hwb(190, 35%, 20%); 36 --yellow:#ffff00; 37 --red:#e20046; 38 } 39 40 body,html{ font-family: ‘Microsoft Yahei‘,‘宋体‘;} 41 a:hover,a{ text-decoration:none;} 42 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%;} 43 body{ 44 background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a9b14), to(#639c2e)); 45 background: -moz-linear-gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#639c2e)); 46 background: gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#5a9b14)); 47 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#5a9b14‘, endColorstr=‘#639c2e‘, GradientType=‘0‘); 48 } 49 .color-yellow{ 50 c:var(--yellow); 51 } 52 .color-red{ 53 c:var(--red); 54 } 55 .fl{ 56 fl:left; 57 } 58 .fr{ 59 fl:right; 60 } 61 62 .clear { 63 clear: fix-legacy; 64 } 65 .conter{ 66 w:var(--conter); 67 m:0 auto; 68 } 69 70 /* 动画 */ 71 @keyframes rotation{ 72 0% { 73 trf:rotate(0deg); 74 } 75 100% { 76 trf:rotate(360deg); 77 } 78 } 79 80 @keyframes rotation2{ 81 0% { 82 trf:rotate(360deg); 83 } 84 100% { 85 trf:rotate(0deg); 86 } 87 } 88 89 @keyframes chartLineflower{ 90 0% { 91 trf:scale(0.8,0.8); 92 } 93 100% { 94 trf:scale(1.2,1.2); 95 } 96 } 97 98 @keyframes line1{ 99 0% { 100 l: 152px; 101 } 102 100% { 103 l: 0px; 104 } 105 } 106 107 @keyframes line2{ 108 0% { 109 l: 106px; 110 } 111 100% { 112 l: 0px; 113 } 114 } 115 116 @keyframes line3{ 117 0% { 118 r: 141px; 119 } 120 100% { 121 r: 0; 122 } 123 } 124 125 @keyframes line4{ 126 0% { 127 r: 95px; 128 } 129 100% { 130 r: 0; 131 } 132 } 133 134 .welfare{ 135 h:667px; 136 bg: url(‘../i/welfare.png‘) no-repeat 0 10px; 137 } 138 .my-welfare{ 139 w:724px; 140 h:113px; 141 bdrs: 30px; 142 bgc: var(--yellow); 143 m:0 auto; 144 pos:relative; 145 zi:2; 146 .my-wM{ 147 p:18px 0 0 73px; 148 w:585px; 149 } 150 .my-wl{ 151 fl:left; 152 w:260px; 153 } 154 .my-wPic{ 155 fl:left; 156 w:59px; 157 h:72px; 158 bd:1px solid #d3ccc0; 159 ofl: hidden; 160 img{ 161 w:59px; 162 h:72px; 163 trf:scale(1,1); 164 trs:all 0.2s; 165 } 166 &:hover{ 167 img{ 168 trf:scale(1.2,1.2); 169 } 170 } 171 } 172 .my-wPicTxt{ 173 ml:82px; 174 fz:14px; 175 c:#38402d; 176 lh: 24px; 177 } 178 .my-wr{ 179 fl:right; 180 } 181 .my-wrBtn{ 182 d:block; 183 w:304px; 184 h:88px; 185 bg:url(‘../i/btn.png‘) no-repeat 0 0; 186 &:hover{ 187 bg:url(‘../i/btnHover.png‘) no-repeat 0 0; 188 } 189 } 190 } 191 .my-sticker{ 192 ofl:hidden; 193 } 194 .my-stickerM{ 195 w: 950px; 196 m:32px 0 12px 197 } 198 .my-stl{ 199 pos:relative; 200 fl:left; 201 w:288px; 202 pt:17px; 203 } 204 .my-stH{ 205 pos:absolute; 206 l:50%; 207 t:0; 208 ml:-75px; 209 w:151px; 210 h:35px; 211 lh:35px; 212 fz:24px; 213 c:#ffff00; 214 ta:center; 215 bgc:#f3185c; 216 bdrs:30px; 217 zi:3; 218 } 219 .my-stT{ 220 h:146px; 221 bgc:#ffff00; 222 bdrs:40px; 223 c:#ce9b2f; 224 fz:14px; 225 lh:24px; 226 p:23px 36px 0 14px; 227 mr:11px; 228 ti:2em; 229 pos:relative; 230 zi:2; 231 } 232 .my-period{ 233 w:825px; 234 m:0 auto; 235 pb:42px; 236 fz:18px; 237 lh:32px; 238 c:#fff; 239 } 240 .my-stc{ 241 w:393px; 242 } 243 .my-str{ 244 w:242px; 245 } 246 .pink-bg{ 247 bgc:#e80c50; 248 bdrs: 20px; 249 mb:11px; 250 bdrs: 20px; 251 pos:relative; 252 zi:2; 253 } 254 255 %flowers { 256 pos:absolute; 257 } 258 %lines { 259 pos:absolute; 260 w:75px; 261 h:8px; 262 ofl: hidden; 263 bgc:#ffff00; 264 bdrs: 8px; 265 } 266 267 %listM { 268 w:360px; 269 bgc: #fff; 270 bdrs: 8px; 271 } 272 .my-chartMain{ 273 pos:relative; 274 } 275 276 .my-welList{ 277 w:756px; 278 m:0 auto; 279 pb:25px; 280 .my-well{ 281 fl:left; 282 @extend %listM; 283 } 284 .my-welr{ 285 @extend %listM; 286 fl:right; 287 } 288 .my-pinkLine{ 289 w:204px; 290 h:43px; 291 c:#fbfbfb; 292 fz:18px; 293 lh:40px; 294 m:21px auto 35px; 295 ta:center; 296 bg:url(‘../i/flowerLine.png‘) no-repeat 0 0; 297 } 298 .lists{ 299 pos:relative; 300 pl:97px; 301 } 302 .my-li{ 303 pos:relative; 304 h:130px; 305 } 306 .my-lil{ 307 fl:left; 308 w:76px; 309 } 310 .my-lilPicM{ 311 pos:relative; 312 d:block; 313 ofl:hidden; 314 w:76px; 315 h:92px; 316 span{ 317 d:block; 318 pos:absolute; 319 l:0; 320 b:0; 321 w:100%; 322 h:20px; 323 lh:20px; 324 fz:12px; 325 ta:center; 326 bgc:#000; 327 op:0.5; 328 filter:alpha(opacity=50); 329 c:#fff; 330 } 331 img{ 332 w:76px; 333 h:92px; 334 trf:scale(1,1); 335 trs:all 0.2s; 336 } 337 &:hover{ 338 img{ 339 trf:scale(1.2,1.2); 340 } 341 } 342 } 343 .my-lilPicA{ 344 d:block; 345 ta:center; 346 c:#1657b7; 347 fz:14px; 348 lh:24px; 349 ofl: hidden; 350 ws: nowrap; 351 tofl: ellipsis; 352 } 353 .my-lir{ 354 ml:88px; 355 lh:20px; 356 fz:12px; 357 c:#333; 358 } 359 } 360 %flowerOnes { 361 pos:absolute; 362 } 363 %flowerOnes1 { 364 pos:absolute; 365 l:0; 366 t:0; 367 zi:2; 368 ani:rotation 8s infinite linear; 369 } 370 %flowerOnes2 { 371 pos:absolute; 372 l:0; 373 t:0; 374 zi:1; 375 ani:rotation2 8s infinite linear; 376 } 377 %flowerOnesTxt { 378 ta:center; 379 pos:relative; 380 zi:3; 381 c:#fff; 382 } 383 .flowerOne{ 384 @extend %flowerOnes; 385 l:-69px; 386 t:0; 387 w:58px; 388 h:60px; 389 } 390 .flowerTxt{ 391 fz:30px; 392 lh:60px; 393 @extend %flowerOnesTxt; 394 } 395 .flowerOne-top{ 396 @extend %flowerOnes1; 397 w:58px; 398 h:57px; 399 bg:url(‘../i/flowerOne1.png‘) no-repeat 0 0; 400 } 401 .flowerOne-bottom{ 402 @extend %flowerOnes2; 403 w:58px; 404 h:60px; 405 bg:url(‘../i/flowerOne2.png‘) no-repeat 0 0; 406 } 407 .flowers{ 408 @extend %flowerOnes; 409 l:-46px; 410 t:0; 411 w:37px; 412 h:39px; 413 } 414 .flowersTxt{ 415 fz:18px; 416 lh:39px; 417 @extend %flowerOnesTxt; 418 } 419 .flowers-top{ 420 @extend %flowerOnes1; 421 w:37px; 422 h:39px; 423 bg:url(‘../i/flowers1.png‘) no-repeat 0 0; 424 } 425 .flowers-bottom{ 426 @extend %flowerOnes2; 427 w:37px; 428 h:39px; 429 bg:url(‘../i/flowers2.png‘) no-repeat 0 0; 430 } 431 432 .btn-m{ 433 mt:2px; 434 } 435 .btn{ 436 d:inline-block; 437 w:75px; 438 h:30px; 439 lh:30px; 440 ta:center; 441 fz:14px; 442 c:#fff; 443 bgc:#f92f6e; 444 trs:all 0.2s; 445 &:hover{ 446 td:none; 447 bgc:#fc435b; 448 } 449 } 450 .my-chartLine{ 451 pos:relative; 452 w:756px; 453 m:0 auto; 454 p:26px 0 20px 0 ; 455 .chartLine{ 456 pos:relative; 457 w:263px; 458 h:56px; 459 lh:50px; 460 fz:24px; 461 c:#e00073; 462 ta:center; 463 m:0 auto; 464 bg:url(‘../i/chartLine.png‘) no-repeat 0 0; 465 } 466 .chartLineflower1{ 467 @extend %flowers; 468 w:65px; 469 h:69px; 470 t:-23px; 471 l:0; 472 bg:url(‘../i/chartLineflower1.png‘) no-repeat 0 0; 473 ani:chartLineflower 3s infinite linear alternate; 474 } 475 .chartLineflower2{ 476 @extend %flowers; 477 r:-31px; 478 b:-14px; 479 w:49px; 480 h:51px; 481 bg:url(‘../i/chartLineflower2.png‘) no-repeat 0 0; 482 ani:chartLineflower 3s 0.4s infinite ease-in alternate; 483 } 484 .my-line1{ 485 @extend %lines; 486 l:152px; 487 t:51px; 488 zi:2; 489 ani:line1 3s 0.4s infinite ease-in alternate; 490 } 491 .my-line2{ 492 @extend %lines; 493 l:106px; 494 t:66px; 495 zi:2; 496 ani:line2 2s 0.1s infinite ease-in alternate; 497 } 498 .my-line3{ 499 @extend %lines; 500 r:141px; 501 t:51px; 502 zi:2; 503 ani:line3 3s 0.3s infinite ease-in alternate; 504 } 505 .my-line4{ 506 @extend %lines; 507 r:95px; 508 t:66px; 509 zi:2; 510 ani:line4 3s 0.3s infinite linear alternate; 511 } 512 } 513 .strange-flower1{ 514 pos:absolute; 515 l:-162px; 516 t:25px; 517 w:133px; 518 h:137px; 519 bg:url(‘../i/strange-flower1.png‘) no-repeat 0 0; 520 } 521 .strange-flower2{ 522 pos:absolute; 523 r:-139px; 524 b:220px; 525 w:139px; 526 h:176px; 527 bg:url(‘../i/strange-flower2.png‘) no-repeat 0 0; 528 } 529 .legend-welfare{ 530 pos:relative; 531 bgc: #3c680c; 532 bdrs: 20px; 533 c: #d1ffa0; 534 zi:2; 535 .strange-flower3{ 536 pos:absolute; 537 l:-124px; 538 t:182px; 539 w:177px; 540 h:148px; 541 bg:url(‘../i/strange-flower3.png‘) no-repeat 0 0; 542 } 543 p:25px 65px 40px 35px; 544 h2{ 545 lh: 55px; 546 fz: 24px; 547 } 548 p{ 549 fz: 18px; 550 lh: 32px; 551 } 552 }
index.css(dest/c/index.css || 注:gulpfile.js没开启cssnano插件优化的展示)编译后:
1 /* 清楚标签默认样式 */ 2 3 html{ margin: 0; padding: 0; border: 0;} 4 5 body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;} 6 7 ol, ul, li{ list-style: none;} 8 9 body{ line-height: 1.5; background: white; font-family: ‘Microsoft Yahei‘, Arial, Helvetica, sans-serif; font-size: 12px; color: #333;} 10 11 table,tr, th, td{ border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;} 12 13 caption, th, td{ text-align: left; font-weight: normal; float: none !important;} 14 15 table, th, td, select, img, input,object{ vertical-align: middle;} 16 17 :focus{ outline: 0;} 18 19 input,select{ margin: 0;} 20 21 a{ color: #005EA7; text-decoration: none;} 22 23 a:hover{ text-decoration: underline;} 24 25 p,a,td{ word-wrap: break-word; word-break: break-all;} 26 27 img{ border: none; vertical-align: top;} 28 29 textarea{ resize: none; border: 1px solid #ccc;} 30 31 textarea:hover{ border-color: #ccc;} 32 33 input[type="text"],input[type="button"]{ -webkit-appearance: none; border-radius: 0; font-family: ‘Microsoft Yahei‘,‘黑体‘, Arial, Helvetica, sans-serif;} 34 35 input[type="text"]{ border: solid 1px #ccc; border-radius: 0;} 36 37 dfn{ font-style: normal; font-family: Arial;} 38 39 /*别名;*/ 40 41 /*定义变量;*/ 42 43 body,html{ font-family: ‘Microsoft Yahei‘,‘宋体‘;} 44 a:hover,a{ text-decoration:none;} 45 table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%;} 46 body{ 47 background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a9b14), to(#639c2e)); 48 background: -moz-linear-gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#639c2e)); 49 background: gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#5a9b14)); 50 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#5a9b14‘, endColorstr=‘#639c2e‘, GradientType=‘0‘); 51 } 52 .color-yellow{ 53 color: #ffff00; 54 } 55 .color-red{ 56 color: #e20046; 57 } 58 .fl{ 59 float: left; 60 } 61 .fr{ 62 float: right; 63 } 64 65 .clear:before, 66 .clear:after{ content: ‘ ‘; display: table;} 67 68 .clear:after{ clear: both;} 69 70 .clear { 71 zoom: 1; 72 } 73 .conter{ 74 width: 915px; 75 margin: 0 auto; 76 } 77 78 /* 动画 */ 79 @-webkit-keyframes rotation{ 80 0% { 81 transform: rotate(0deg); 82 } 83 100% { 84 transform: rotate(360deg); 85 } 86 } 87 @keyframes rotation{ 88 0% { 89 transform: rotate(0deg); 90 } 91 100% { 92 transform: rotate(360deg); 93 } 94 } 95 96 @-webkit-keyframes rotation2{ 97 0% { 98 transform: rotate(360deg); 99 } 100 100% { 101 transform: rotate(0deg); 102 } 103 } 104 105 @keyframes rotation2{ 106 0% { 107 transform: rotate(360deg); 108 } 109 100% { 110 transform: rotate(0deg); 111 } 112 } 113 114 @-webkit-keyframes chartLineflower{ 115 0% { 116 transform: scale(0.8,0.8); 117 } 118 100% { 119 transform: scale(1.2,1.2); 120 } 121 } 122 123 @keyframes chartLineflower{ 124 0% { 125 transform: scale(0.8,0.8); 126 } 127 100% { 128 transform: scale(1.2,1.2); 129 } 130 } 131 132 @-webkit-keyframes line1{ 133 0% { 134 left: 152px; 135 } 136 100% { 137 left: 0px; 138 } 139 } 140 141 @keyframes line1{ 142 0% { 143 left: 152px; 144 } 145 100% { 146 left: 0px; 147 } 148 } 149 150 @-webkit-keyframes line2{ 151 0% { 152 left: 106px; 153 } 154 100% { 155 left: 0px; 156 } 157 } 158 159 @keyframes line2{ 160 0% { 161 left: 106px; 162 } 163 100% { 164 left: 0px; 165 } 166 } 167 168 @-webkit-keyframes line3{ 169 0% { 170 right: 141px; 171 } 172 100% { 173 right: 0; 174 } 175 } 176 177 @keyframes line3{ 178 0% { 179 right: 141px; 180 } 181 100% { 182 right: 0; 183 } 184 } 185 186 @-webkit-keyframes line4{ 187 0% { 188 right: 95px; 189 } 190 100% { 191 right: 0; 192 } 193 } 194 195 @keyframes line4{ 196 0% { 197 right: 95px; 198 } 199 100% { 200 right: 0; 201 } 202 } 203 204 .welfare{ 205 height: 667px; 206 background: url(‘../i/welfare.png‘) no-repeat 0 10px; 207 } 208 .my-welfare{ 209 width: 724px; 210 height: 113px; 211 border-radius: 30px; 212 background-color: #ffff00; 213 margin: 0 auto; 214 position: relative; 215 z-index: 2; 216 } 217 .my-welfare .my-wM{ padding: 18px 0 0 73px; width: 585px;} 218 .my-welfare .my-wl{ float: left; width: 260px;} 219 .my-welfare .my-wPic{ float: left; width: 59px; height: 72px; border: 1px solid #d3ccc0; overflow: hidden;} 220 .my-welfare .my-wPic img{ width: 59px; height: 72px; transform: scale(1,1); transition: all 0.2s;} 221 .my-welfare .my-wPic:hover img{ transform: scale(1.2,1.2);} 222 .my-welfare .my-wPicTxt{ margin-left: 82px; font-size: 14px; color: #38402d; line-height: 24px;} 223 .my-welfare .my-wr{ float: right;} 224 .my-welfare .my-wrBtn{ display: block; width: 304px; height: 88px; background: url(‘../i/btn.png‘) no-repeat 0 0;} 225 .my-welfare .my-wrBtn:hover{ background: url(‘../i/btnHover.png‘) no-repeat 0 0;} 226 .my-sticker{ 227 overflow: hidden; 228 } 229 .my-stickerM{ 230 width: 950px; 231 margin: 32px 0 12px 232 } 233 .my-stl{ 234 position: relative; 235 float: left; 236 width: 288px; 237 padding-top: 17px; 238 } 239 .my-stH{ 240 position: absolute; 241 left: 50%; 242 top: 0; 243 margin-left: -75px; 244 width: 151px; 245 height: 35px; 246 line-height: 35px; 247 font-size: 24px; 248 color: #ffff00; 249 text-align: center; 250 background-color: #f3185c; 251 border-radius: 30px; 252 z-index: 3; 253 } 254 .my-stT{ 255 height: 146px; 256 background-color: #ffff00; 257 border-radius: 40px; 258 color: #ce9b2f; 259 font-size: 14px; 260 line-height: 24px; 261 padding: 23px 36px 0 14px; 262 margin-right: 11px; 263 text-indent: 2em; 264 position: relative; 265 z-index: 2; 266 } 267 .my-period{ 268 width: 825px; 269 margin: 0 auto; 270 padding-bottom: 42px; 271 font-size: 18px; 272 line-height: 32px; 273 color: #fff; 274 } 275 .my-stc{ 276 width: 393px; 277 } 278 .my-str{ 279 width: 242px; 280 } 281 .pink-bg{ 282 background-color: #e80c50; 283 border-radius: 20px; 284 margin-bottom: 11px; 285 border-radius: 20px; 286 position: relative; 287 z-index: 2; 288 } 289 290 .my-chartLine .chartLineflower1, .my-chartLine .chartLineflower2 { 291 position: absolute; 292 } 293 .my-chartLine .my-line1, .my-chartLine .my-line2, .my-chartLine .my-line3, .my-chartLine .my-line4 { 294 position: absolute; 295 width: 75px; 296 height: 8px; 297 overflow: hidden; 298 background-color: #ffff00; 299 border-radius: 8px; 300 } 301 302 .my-welList .my-well, .my-welList .my-welr { 303 width: 360px; 304 background-color: #fff; 305 border-radius: 8px; 306 } 307 .my-chartMain{ 308 position: relative; 309 } 310 311 .my-welList{ 312 width: 756px; 313 margin: 0 auto; 314 padding-bottom: 25px; 315 } 316 317 .my-welList .my-well{ float: left;} 318 319 .my-welList .my-welr{ float: right;} 320 321 .my-welList .my-pinkLine{ width: 204px; height: 43px; color: #fbfbfb; font-size: 18px; line-height: 40px; margin: 21px auto 35px; text-align: center; background: url(‘../i/flowerLine.png‘) no-repeat 0 0;} 322 323 .my-welList .lists{ position: relative; padding-left: 97px;} 324 325 .my-welList .my-li{ position: relative; height: 130px;} 326 327 .my-welList .my-lil{ float: left; width: 76px;} 328 329 .my-welList .my-lilPicM{ position: relative; display: block; overflow: hidden; width: 76px; height: 92px;} 330 331 .my-welList .my-lilPicM span{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; line-height: 20px; font-size: 12px; text-align: center; background-color: #000; opacity: 0.5; filter:alpha(opacity=50); color: #fff;} 332 333 .my-welList .my-lilPicM img{ width: 76px; height: 92px; transform: scale(1,1); transition: all 0.2s;} 334 335 .my-welList .my-lilPicM:hover img{ transform: scale(1.2,1.2);} 336 337 .my-welList .my-lilPicA{ display: block; text-align: center; color: #1657b7; font-size: 14px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 338 339 .my-welList .my-lir{ margin-left: 88px; line-height: 20px; font-size: 12px; color: #333;} 340 .flowerOne, .flowers { 341 position: absolute; 342 } 343 .flowerOne-top, .flowers-top { 344 position: absolute; 345 left: 0; 346 top: 0; 347 z-index: 2; 348 animation: rotation 8s infinite linear; 349 } 350 .flowerOne-bottom, .flowers-bottom { 351 position: absolute; 352 left: 0; 353 top: 0; 354 z-index: 1; 355 animation: rotation2 8s infinite linear; 356 } 357 .flowerTxt, .flowersTxt { 358 text-align: center; 359 position: relative; 360 z-index: 3; 361 color: #fff; 362 } 363 .flowerOne{ 364 left: -69px; 365 top: 0; 366 width: 58px; 367 height: 60px; 368 } 369 .flowerTxt{ 370 font-size: 30px; 371 line-height: 60px; 372 } 373 .flowerOne-top{ 374 width: 58px; 375 height: 57px; 376 background: url(‘../i/flowerOne1.png‘) no-repeat 0 0; 377 } 378 .flowerOne-bottom{ 379 width: 58px; 380 height: 60px; 381 background: url(‘../i/flowerOne2.png‘) no-repeat 0 0; 382 } 383 .flowers{ 384 left: -46px; 385 top: 0; 386 width: 37px; 387 height: 39px; 388 } 389 .flowersTxt{ 390 font-size: 18px; 391 line-height: 39px; 392 } 393 .flowers-top{ 394 width: 37px; 395 height: 39px; 396 background: url(‘../i/flowers1.png‘) no-repeat 0 0; 397 } 398 .flowers-bottom{ 399 width: 37px; 400 height: 39px; 401 background: url(‘../i/flowers2.png‘) no-repeat 0 0; 402 } 403 404 .btn-m{ 405 margin-top: 2px; 406 } 407 .btn{ 408 display: inline-block; 409 width: 75px; 410 height: 30px; 411 line-height: 30px; 412 text-align: center; 413 font-size: 14px; 414 color: #fff; 415 background-color: #f92f6e; 416 transition: all 0.2s; 417 } 418 .btn:hover{ text-decoration: none; background-color: #fc435b;} 419 .my-chartLine{ 420 position: relative; 421 width: 756px; 422 margin: 0 auto; 423 padding: 26px 0 20px 0 ; 424 } 425 .my-chartLine .chartLine{ position: relative; width: 263px; height: 56px; line-height: 50px; font-size: 24px; color: #e00073; text-align: center; margin: 0 auto; background: url(‘../i/chartLine.png‘) no-repeat 0 0;} 426 .my-chartLine .chartLineflower1{ width: 65px; height: 69px; top: -23px; left: 0; background: url(‘../i/chartLineflower1.png‘) no-repeat 0 0; animation: chartLineflower 3s infinite linear alternate;} 427 .my-chartLine .chartLineflower2{ right: -31px; bottom: -14px; width: 49px; height: 51px; background: url(‘../i/chartLineflower2.png‘) no-repeat 0 0; animation: chartLineflower 3s 0.4s infinite ease-in alternate;} 428 .my-chartLine .my-line1{ left: 152px; top: 51px; z-index: 2; animation: line1 3s 0.4s infinite ease-in alternate;} 429 .my-chartLine .my-line2{ left: 106px; top: 66px; z-index: 2; animation: line2 2s 0.1s infinite ease-in alternate;} 430 .my-chartLine .my-line3{ right: 141px; top: 51px; z-index: 2; animation: line3 3s 0.3s infinite ease-in alternate;} 431 .my-chartLine .my-line4{ right: 95px; top: 66px; z-index: 2; animation: line4 3s 0.3s infinite linear alternate;} 432 .strange-flower1{ 433 position: absolute; 434 left: -162px; 435 top: 25px; 436 width: 133px; 437 height: 137px; 438 background: url(‘../i/strange-flower1.png‘) no-repeat 0 0; 439 } 440 .strange-flower2{ 441 position: absolute; 442 right: -139px; 443 bottom: 220px; 444 width: 139px; 445 height: 176px; 446 background: url(‘../i/strange-flower2.png‘) no-repeat 0 0; 447 } 448 .legend-welfare{ 449 position: relative; 450 background-color: #3c680c; 451 border-radius: 20px; 452 color: #d1ffa0; 453 z-index: 2; 454 padding: 25px 65px 40px 35px; 455 } 456 .legend-welfare .strange-flower3{ position: absolute; left: -124px; top: 182px; width: 177px; height: 148px; background: url(‘../i/strange-flower3.png‘) no-repeat 0 0;} 457 .legend-welfare h2{ line-height: 55px; font-size: 24px;} 458 .legend-welfare p{ font-size: 18px; line-height: 32px;}
后记：
作为了一个 不断推出吹比技能点的前端圈来说不会xxx 你怎么能融进这个 前端生态圈 怎么写简历 怎么骗面试 是不是
这个是2016年5.1劳动节之前做的专题，因为是个专题小所以我postcss插件用的不是特别多
有点尴尬是我这个人不记代码 记性不好，人家是过目不忘，我是过目就忘 ‘只能意会 取其神 忘其形 (新版《三少爷的剑》电影)’
所以这17年写文章的时候 代码啥意思全忘了，然后又从新大概的扫了一遍大漠网站上的文章
我从新看完文章在结合去年5月份的感受就是 postcss 如果作为个人开发，个人维护 玩的666的话其实是要比sass,less有意思的，我之前开发sass基础混合宏里也有借鉴postcss插件的写法
因为postcss本身是个插件平台，你可以做一套属于你自己的‘兵器库’
但是如果是团队合作开发再有新手的话 他还需要适应的几乎可能没有正常css代码的节奏，比如说插件里的 改名 变量 简写 .... 还有可能我自己写一套自己的插件规则 增加了上手的时间
参考资料：
大漠 ： http://www.w3cplus.com/blog/tags/516.html
PostCSS 实战
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。