PostCSS 实战
专题截图：
项目截图：
目录说明:
dest/ 发布代码文件夹；
src/ 预编译代码文件夹;
node_modules node 插件;
gulpfile.js gulp的配置文件;
package.json npm 配置文件;
src/待编译文件夹:
c/ css文件目录;
i/ img文件目录;
dest/发布文件夹:
c/ css文件目录;
i/ img文件目录;
package.json 文件展示：
{
"name": "may-topic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.0",
"cssnano": "^3.10.0",
"cssnext": "^1.8.4",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-imagemin": "^3.1.1",
"gulp-livereload": "^3.8.1",
"gulp-postcss": "^6.3.0",
"imagemin-pngquant": "^5.0.0",
"postcss-alias": "^1.0.0",
"postcss-clearfix": "^1.0.0",
"postcss-css-variables": "^0.6.0",
"postcss-mixins": "^5.4.1",
"postcss-nested": "^1.0.0",
"postcss-sass-extend": "0.0.1",
"precss": "^1.4.0"
},
"dependencies": {
"gulp-imagemin": "^3.1.1",
"imagemin-pngquant": "^5.0.0"
}
}
gulpfile.js文件展示：
'use strict';
let gulp = require('gulp'); //gulp
let postcss = require('gulp-postcss'); //gulp-postcss；
let precss = require('precss'); //postcss插件任务数组;
let cssnext = require('cssnext'); //未来css新语法;
let cssnano = require('cssnano'); //CSS优化的插件包
let autoprefixer = require('autoprefixer'); //添加css3 前缀;
let alias = require('postcss-alias'); //css 别名设置;
let crip = require('postcss-crip'); //css 简写;
let nested = require('postcss-nested'); //css 嵌套；
let clearfix = require('postcss-clearfix'); //css 清浮动;
let mixins = require('postcss-mixins'); //混合宏;
let extend = require('postcss-sass-extend'); //extend插件;
let variables = require('postcss-css-variables'); //变量插件; /* 本地服务 */
let port = 8000;//端口号;
let connect = require('gulp-connect'); //本地Server服务；
let livereload = require('gulp-livereload'); //刷新浏览器(同时chrome安装LiveReload插件);; /* 启动服务器 */
gulp.task('webserver',function(){
connect.server({
port : port,
livereload:true
});
}); //css处理;
gulp.task('css', function () { //设置css路径;
let [cssSrc,cssDst] = ['./src/c/*.css','./dest/c/']; //postcss插件数组;
let processors =[
autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false }),
cssnext,
alias,
crip,
clearfix,
nested,
mixins,
variables,
extend,
cssnano
]; return gulp.src( cssSrc )
.pipe(postcss(processors))
.pipe( gulp.dest(cssDst) ); }); //HTML处理
gulp.task('html', function() { //设置路径；
let [htmlSrc,htmlDst] = ['./src/*.html','./dest/']; gulp.src(htmlSrc)
.pipe( gulp.dest(htmlDst) )
.pipe(livereload());
}); //压缩图片
var imagemin = require('gulp-imagemin'); // 压缩图片 $ npm i -D gulp-imagemin;
var pngquant = require('imagemin-pngquant'); // 压缩图片 $ npm i -D imagemin-pngquant;
gulp.task('img', function(){ //设置img路径;
let [imgSrc,imgDst] = ['./src/i/','./dest/i/']; //图片路径； return gulp.src( imgSrc + '*.{png,jpg,gif,ico}' )
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
svgoPlugins: [
{removeViewBox: false} //不要移除svg的viewbox属性
],
use: [pngquant({quality: '65-80'})] //使用pngquant深度压缩png图片的imagemin插件/quality 压缩的比例最好60-80之间;
}))
.pipe(gulp.dest(imgDst));
}); //实时监听;
gulp.task('watch',function(){
gulp.watch('src/c/*.css',['css']);
gulp.watch('src/*.html',['html'])
gulp.watch('src/i/*.*',['img'])
livereload.listen({start:true});
}); //添加默认事件;
gulp.task('default',function(){
gulp.run('webserver','watch','html','img');
});
index.html 代码(其实也没啥好看的):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="html-bg">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五一专题</title>
<link rel="stylesheet" href="c/index.css">
<!--[if lte IE 6]>
<script type="text/javascript" src="http://images.miuu.cn/w4/common/j/DD_belatedPNG_0.0.8a_IE6.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img,.ie6-img');
</script>
<![endif]-->
</head>
<body>
<div class="conter">
<div class="welfare ie6-img"></div>
<div class="my-welfare">
<div clss="my-welfareBg"></div>
<div class="my-wM clear">
<div class="my-wl">
<div class="my-wPic">
<a href="#">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" width="59" height="72" />
</a>
</div>
<div class="my-wPicTxt">
<p>
我送出的桃花：1999只
</p>
<p>
我收到的桃花： 999只
</p>
<p>
我的排名：1999
</p>
</div>
</div>
<div class="my-wr">
<a href="#" class="my-wrBtn ie6-img"></a>
</div>
</div>
</div>
<div class="my-sticker">
<div class="my-stickerM clear">
<div class="my-stl">
<div class="my-stH ie6-img">
多发多赢
</div>
<div class="my-stT">
参与游戏可送出桃花1朵给每位收信用户，如果收信用户也参与了游戏您将收到桃花一朵，多发信才有可能多收桃花哦!
</div>
</div>
<div class="my-stl my-stc">
<div class="my-stH ie6-img">
送福利啦
</div>
<div class="my-stT">
排行榜以收到桃花数计算，7日更新一次，男女会员<span class="color-red">第1名将会得到钻石会员1年＋免费体验线下xx吧一次的福利，2~5名会得到VIP一个月及免费体验一次xx吧的福利</span>，若已经是钻石会员的用户可以累计哦
</div>
</div>
<div class="my-stl my-str">
<div class="my-stH ie6-img">
参与有奖
</div>
<div class="my-stT">
参与的用户均会获得50金豆/天
</div>
</div>
</div>
</div>
<div class="pink-bg my-chartMain">
<div class="my-chartLine">
<div class="my-line1"></div>
<div class="my-line2"></div>
<div class="chartLine ">
上期获奖名单
</div>
<div class="my-line3"></div>
<div class="my-line4"></div>
</div>
<div class="my-period">
<span class="color-yellow">恭喜</span>用户男1和用户女1<span class="color-yellow">获得钻石会员＋xx吧免费体验一次</span><br/>
<span class="color-yellow">恭喜</span>，
用户男2，用户男3，用户男4，用户男5,用户女2，用户女3，用户女4，用户女5 <span class="color-yellow">获得VIP一个月＋xx吧免费体验一次</span>
</div>
</div>
<div class="pink-bg my-chartMain">
<div class="strange-flower1 ie6-img"></div>
<div class="strange-flower2 ie6-img"></div>
<div class="my-chartLine">
<div class="my-line1"></div>
<div class="my-line2"></div>
<div class="chartLine">
<div class="chartLineflower1 ie6-img"></div>
<div class="chartLineflower2 ie6-img"></div>
桃花排行榜
</div>
<div class="my-line3"></div>
<div class="my-line4"></div>
</div>
<div class="my-welList clear">
<div class="my-well">
<div class="my-pinkLine ie6-img">
男会员
</div>
<div class="lists">
<div class="my-li clear">
<div class="flowerOne">
<div class="flowerTxt">
1
</div>
<div class="flowerOne-top ie6-img ie6-img"></div>
<div class="flowerOne-bottom ie6-img ie6-img"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
2
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
3
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
4
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
5
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
</div>
</div>
<div class="my-welr">
<div class="my-pinkLine ie6-img">
女会员
</div>
<div class="lists">
<div class="my-li clear">
<div class="flowerOne">
<div class="flowerTxt">
1
</div>
<div class="flowerOne-top ie6-img"></div>
<div class="flowerOne-bottom ie6-img"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
2
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
3
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
4
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
<div class="my-li clear">
<div class="flowers">
<div class="flowersTxt">
5
</div>
<div class="flowers-top"></div>
<div class="flowers-bottom"></div>
</div>
<div class="my-lil">
<div class="my-lilPic">
<a href="#" class="my-lilPicM">
<img src="http://a1.jyimg.com/3c/16/4bca65a00e4b0421476de2c35614/4bca65a00_3_avatar_p.jpg" alt="" / width="76" height="92">
<span>
1000+
</span>
</a>
<a href="#" class="my-lilPicA">
会员
</a>
</div>
</div>
<div class="my-lir">
<p>
28岁 176厘米
</p>
<p>
北京门头沟
</p>
<p>
10000～20000元
</p>
<div class="btn-m">
<a href="#" class="btn">写 信</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="legend-welfare">
<div class="strange-flower3 ie6-img"></div>
<h2>
活动说明
</h2>
<p>
1. 活动有效期内每7日更新一次排名，更新前保持第一名男女用户均会得到钻石会员1年＋xx吧免费<br/> 体验一次的福利，若已经是钻石会员的用户，将会再累计一年；
</p>
<p>
2. 2~5名用户均会得到VIP一个月的福利＋xx吧免费体验一次
</p>
<p>
3. 每日参与用户均会得到50金豆一次；
</p>
<p>
4. 用户发送桃花信，除收信方会收到一朵桃花外，若收信方也参与了游戏，发信方也会收到一朵桃花；
</p>
<p>
5. 排行榜更新后，前一期福利3个工作日内以站内信形式送出；
</p>
</div>
</div>
</body>
</html>
index.css(src/c/index.css) 预编译:
@define-mixin label{
/* 清楚标签默认样式 */
html {margin:; padding:; border:;}
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:; padding:; border:; font-size: 100%; vertical-align: baseline; }
ol, ul, li { list-style: none; }
body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline;}
caption, th, td { text-align: left; font-weight: normal; float: none !important; }
table, th, td, select, img, input,object{ vertical-align: middle;}
:focus { outline:;}
input,select{margin:;}
a { color: #005EA7; text-decoration: none; }
a:hover { text-decoration:underline; }
p,a,td{word-wrap:break-word;word-break:break-all;}
img { border: none;vertical-align:top; }
textarea{ resize:none;border:1px solid #ccc;}
textarea:hover{border-color:#ccc;}
input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius:;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
input[type="text"]{border:solid 1px #ccc; border-radius:;}
dfn {font-style: normal;font-family: Arial;}
}
@mixin label;
/*别名;*/
@alias {
le:line-height;
}
/*定义变量;*/
:root {
--conter:915px;
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
--yellow:#ffff00;
--red:#e20046;
}
body,html{ font-family: 'Microsoft Yahei','宋体';}
a:hover,a{ text-decoration:none;}
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%;}
body{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a9b14), to(#639c2e));
background: -moz-linear-gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#639c2e));
background: gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#5a9b14));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a9b14', endColorstr='#639c2e', GradientType='0');
}
.color-yellow{
c:var(--yellow);
}
.color-red{
c:var(--red);
}
.fl{
fl:left;
}
.fr{
fl:right;
}
.clear {
clear: fix-legacy;
}
.conter{
w:var(--conter);
m:0 auto;
}
/* 动画 */
@keyframes rotation{
0% {
trf:rotate(0deg);
}
100% {
trf:rotate(360deg);
}
}
@keyframes rotation2{
0% {
trf:rotate(360deg);
}
100% {
trf:rotate(0deg);
}
}
@keyframes chartLineflower{
0% {
trf:scale(0.8,0.8);
}
100% {
trf:scale(1.2,1.2);
}
}
@keyframes line1{
0% {
l: 152px;
}
100% {
l: 0px;
}
}
@keyframes line2{
0% {
l: 106px;
}
100% {
l: 0px;
}
}
@keyframes line3{
0% {
r: 141px;
}
100% {
r:;
}
}
@keyframes line4{
0% {
r: 95px;
}
100% {
r:;
}
}
.welfare{
h:667px;
bg: url('../i/welfare.png') no-repeat 0 10px;
}
.my-welfare{
w:724px;
h:113px;
bdrs: 30px;
bgc: var(--yellow);
m:0 auto;
pos:relative;
zi:;
.my-wM{
p:18px 0 0 73px;
w:585px;
}
.my-wl{
fl:left;
w:260px;
}
.my-wPic{
fl:left;
w:59px;
h:72px;
bd:1px solid #d3ccc0;
ofl: hidden;
img{
w:59px;
h:72px;
trf:scale(1,1);
trs:all 0.2s;
}
&:hover{
img{
trf:scale(1.2,1.2);
}
}
}
.my-wPicTxt{
ml:82px;
fz:14px;
c:#38402d;
lh: 24px;
}
.my-wr{
fl:right;
}
.my-wrBtn{
d:block;
w:304px;
h:88px;
bg:url('../i/btn.png') no-repeat 0 0;
&:hover{
bg:url('../i/btnHover.png') no-repeat 0 0;
}
}
}
.my-sticker{
ofl:hidden;
}
.my-stickerM{
w: 950px;
m:32px 0 12px
}
.my-stl{
pos:relative;
fl:left;
w:288px;
pt:17px;
}
.my-stH{
pos:absolute;
l:50%;
t:;
ml:-75px;
w:151px;
h:35px;
lh:35px;
fz:24px;
c:#ffff00;
ta:center;
bgc:#f3185c;
bdrs:30px;
zi:;
}
.my-stT{
h:146px;
bgc:#ffff00;
bdrs:40px;
c:#ce9b2f;
fz:14px;
lh:24px;
p:23px 36px 0 14px;
mr:11px;
ti:2em;
pos:relative;
zi:;
}
.my-period{
w:825px;
m:0 auto;
pb:42px;
fz:18px;
lh:32px;
c:#fff;
}
.my-stc{
w:393px;
}
.my-str{
w:242px;
}
.pink-bg{
bgc:#e80c50;
bdrs: 20px;
mb:11px;
bdrs: 20px;
pos:relative;
zi:;
}
%flowers {
pos:absolute;
}
%lines {
pos:absolute;
w:75px;
h:8px;
ofl: hidden;
bgc:#ffff00;
bdrs: 8px;
}
%listM {
w:360px;
bgc: #fff;
bdrs: 8px;
}
.my-chartMain{
pos:relative;
}
.my-welList{
w:756px;
m:0 auto;
pb:25px;
.my-well{
fl:left;
@extend %listM;
}
.my-welr{
@extend %listM;
fl:right;
}
.my-pinkLine{
w:204px;
h:43px;
c:#fbfbfb;
fz:18px;
lh:40px;
m:21px auto 35px;
ta:center;
bg:url('../i/flowerLine.png') no-repeat 0 0;
}
.lists{
pos:relative;
pl:97px;
}
.my-li{
pos:relative;
h:130px;
}
.my-lil{
fl:left;
w:76px;
}
.my-lilPicM{
pos:relative;
d:block;
ofl:hidden;
w:76px;
h:92px;
span{
d:block;
pos:absolute;
l:;
b:;
w:100%;
h:20px;
lh:20px;
fz:12px;
ta:center;
bgc:#000;
op:0.5;
filter:alpha(opacity=50);
c:#fff;
}
img{
w:76px;
h:92px;
trf:scale(1,1);
trs:all 0.2s;
}
&:hover{
img{
trf:scale(1.2,1.2);
}
}
}
.my-lilPicA{
d:block;
ta:center;
c:#1657b7;
fz:14px;
lh:24px;
ofl: hidden;
ws: nowrap;
tofl: ellipsis;
}
.my-lir{
ml:88px;
lh:20px;
fz:12px;
c:#333;
}
}
%flowerOnes {
pos:absolute;
}
%flowerOnes1 {
pos:absolute;
l:;
t:;
zi:;
ani:rotation 8s infinite linear;
}
%flowerOnes2 {
pos:absolute;
l:;
t:;
zi:;
ani:rotation2 8s infinite linear;
}
%flowerOnesTxt {
ta:center;
pos:relative;
zi:;
c:#fff;
}
.flowerOne{
@extend %flowerOnes;
l:-69px;
t:;
w:58px;
h:60px;
}
.flowerTxt{
fz:30px;
lh:60px;
@extend %flowerOnesTxt;
}
.flowerOne-top{
@extend %flowerOnes1;
w:58px;
h:57px;
bg:url('../i/flowerOne1.png') no-repeat 0 0;
}
.flowerOne-bottom{
@extend %flowerOnes2;
w:58px;
h:60px;
bg:url('../i/flowerOne2.png') no-repeat 0 0;
}
.flowers{
@extend %flowerOnes;
l:-46px;
t:;
w:37px;
h:39px;
}
.flowersTxt{
fz:18px;
lh:39px;
@extend %flowerOnesTxt;
}
.flowers-top{
@extend %flowerOnes1;
w:37px;
h:39px;
bg:url('../i/flowers1.png') no-repeat 0 0;
}
.flowers-bottom{
@extend %flowerOnes2;
w:37px;
h:39px;
bg:url('../i/flowers2.png') no-repeat 0 0;
}
.btn-m{
mt:2px;
}
.btn{
d:inline-block;
w:75px;
h:30px;
lh:30px;
ta:center;
fz:14px;
c:#fff;
bgc:#f92f6e;
trs:all 0.2s;
&:hover{
td:none;
bgc:#fc435b;
}
}
.my-chartLine{
pos:relative;
w:756px;
m:0 auto;
p:26px 0 20px 0 ;
.chartLine{
pos:relative;
w:263px;
h:56px;
lh:50px;
fz:24px;
c:#e00073;
ta:center;
m:0 auto;
bg:url('../i/chartLine.png') no-repeat 0 0;
}
.chartLineflower1{
@extend %flowers;
w:65px;
h:69px;
t:-23px;
l:;
bg:url('../i/chartLineflower1.png') no-repeat 0 0;
ani:chartLineflower 3s infinite linear alternate;
}
.chartLineflower2{
@extend %flowers;
r:-31px;
b:-14px;
w:49px;
h:51px;
bg:url('../i/chartLineflower2.png') no-repeat 0 0;
ani:chartLineflower 3s 0.4s infinite ease-in alternate;
}
.my-line1{
@extend %lines;
l:152px;
t:51px;
zi:;
ani:line1 3s 0.4s infinite ease-in alternate;
}
.my-line2{
@extend %lines;
l:106px;
t:66px;
zi:;
ani:line2 2s 0.1s infinite ease-in alternate;
}
.my-line3{
@extend %lines;
r:141px;
t:51px;
zi:;
ani:line3 3s 0.3s infinite ease-in alternate;
}
.my-line4{
@extend %lines;
r:95px;
t:66px;
zi:;
ani:line4 3s 0.3s infinite linear alternate;
}
}
.strange-flower1{
pos:absolute;
l:-162px;
t:25px;
w:133px;
h:137px;
bg:url('../i/strange-flower1.png') no-repeat 0 0;
}
.strange-flower2{
pos:absolute;
r:-139px;
b:220px;
w:139px;
h:176px;
bg:url('../i/strange-flower2.png') no-repeat 0 0;
}
.legend-welfare{
pos:relative;
bgc: #3c680c;
bdrs: 20px;
c: #d1ffa0;
zi:;
.strange-flower3{
pos:absolute;
l:-124px;
t:182px;
w:177px;
h:148px;
bg:url('../i/strange-flower3.png') no-repeat 0 0;
}
p:25px 65px 40px 35px;
h2{
lh: 55px;
fz: 24px;
}
p{
fz: 18px;
lh: 32px;
}
}
index.css(dest/c/index.css || 注:gulpfile.js没开启cssnano插件优化的展示)编译后:
/* 清楚标签默认样式 */
html{ margin:; padding:; border:;}
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:; padding:; border:; font-size: 100%; vertical-align: baseline;}
ol, ul, li{ list-style: none;}
body{ line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
table,tr, th, td{ border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline;}
caption, th, td{ text-align: left; font-weight: normal; float: none !important;}
table, th, td, select, img, input,object{ vertical-align: middle;}
:focus{ outline:;}
input,select{ margin:;}
a{ color: #005EA7; text-decoration: none;}
a:hover{ text-decoration: underline;}
p,a,td{ word-wrap: break-word; word-break: break-all;}
img{ border: none; vertical-align: top;}
textarea{ resize: none; border: 1px solid #ccc;}
textarea:hover{ border-color: #ccc;}
input[type="text"],input[type="button"]{ -webkit-appearance: none; border-radius:; font-family: 'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
input[type="text"]{ border: solid 1px #ccc; border-radius:;}
dfn{ font-style: normal; font-family: Arial;}
/*别名;*/
/*定义变量;*/
body,html{ font-family: 'Microsoft Yahei','宋体';}
a:hover,a{ text-decoration:none;}
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%;}
body{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#5a9b14), to(#639c2e));
background: -moz-linear-gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#639c2e));
background: gradient(top, 0 10%, 0 100%, from(#5a9b14), to(#5a9b14));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a9b14', endColorstr='#639c2e', GradientType='0');
}
.color-yellow{
color: #ffff00;
}
.color-red{
color: #e20046;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear:before,
.clear:after{ content: ' '; display: table;}
.clear:after{ clear: both;}
.clear {
zoom:;
}
.conter{
width: 915px;
margin: 0 auto;
}
/* 动画 */
@-webkit-keyframes rotation{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotation{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotation2{
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotation2{
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes chartLineflower{
0% {
transform: scale(0.8,0.8);
}
100% {
transform: scale(1.2,1.2);
}
}
@keyframes chartLineflower{
0% {
transform: scale(0.8,0.8);
}
100% {
transform: scale(1.2,1.2);
}
}
@-webkit-keyframes line1{
0% {
left: 152px;
}
100% {
left: 0px;
}
}
@keyframes line1{
0% {
left: 152px;
}
100% {
left: 0px;
}
}
@-webkit-keyframes line2{
0% {
left: 106px;
}
100% {
left: 0px;
}
}
@keyframes line2{
0% {
left: 106px;
}
100% {
left: 0px;
}
}
@-webkit-keyframes line3{
0% {
right: 141px;
}
100% {
right:;
}
}
@keyframes line3{
0% {
right: 141px;
}
100% {
right:;
}
}
@-webkit-keyframes line4{
0% {
right: 95px;
}
100% {
right:;
}
}
@keyframes line4{
0% {
right: 95px;
}
100% {
right:;
}
}
.welfare{
height: 667px;
background: url('../i/welfare.png') no-repeat 0 10px;
}
.my-welfare{
width: 724px;
height: 113px;
border-radius: 30px;
background-color: #ffff00;
margin: 0 auto;
position: relative;
z-index:;
}
.my-welfare .my-wM{ padding: 18px 0 0 73px; width: 585px;}
.my-welfare .my-wl{ float: left; width: 260px;}
.my-welfare .my-wPic{ float: left; width: 59px; height: 72px; border: 1px solid #d3ccc0; overflow: hidden;}
.my-welfare .my-wPic img{ width: 59px; height: 72px; transform: scale(1,1); transition: all 0.2s;}
.my-welfare .my-wPic:hover img{ transform: scale(1.2,1.2);}
.my-welfare .my-wPicTxt{ margin-left: 82px; font-size: 14px; color: #38402d; line-height: 24px;}
.my-welfare .my-wr{ float: right;}
.my-welfare .my-wrBtn{ display: block; width: 304px; height: 88px; background: url('../i/btn.png') no-repeat 0 0;}
.my-welfare .my-wrBtn:hover{ background: url('../i/btnHover.png') no-repeat 0 0;}
.my-sticker{
overflow: hidden;
}
.my-stickerM{
width: 950px;
margin: 32px 0 12px
}
.my-stl{
position: relative;
float: left;
width: 288px;
padding-top: 17px;
}
.my-stH{
position: absolute;
left: 50%;
top:;
margin-left: -75px;
width: 151px;
height: 35px;
line-height: 35px;
font-size: 24px;
color: #ffff00;
text-align: center;
background-color: #f3185c;
border-radius: 30px;
z-index:;
}
.my-stT{
height: 146px;
background-color: #ffff00;
border-radius: 40px;
color: #ce9b2f;
font-size: 14px;
line-height: 24px;
padding: 23px 36px 0 14px;
margin-right: 11px;
text-indent: 2em;
position: relative;
z-index:;
}
.my-period{
width: 825px;
margin: 0 auto;
padding-bottom: 42px;
font-size: 18px;
line-height: 32px;
color: #fff;
}
.my-stc{
width: 393px;
}
.my-str{
width: 242px;
}
.pink-bg{
background-color: #e80c50;
border-radius: 20px;
margin-bottom: 11px;
border-radius: 20px;
position: relative;
z-index:;
}
.my-chartLine .chartLineflower1, .my-chartLine .chartLineflower2 {
position: absolute;
}
.my-chartLine .my-line1, .my-chartLine .my-line2, .my-chartLine .my-line3, .my-chartLine .my-line4 {
position: absolute;
width: 75px;
height: 8px;
overflow: hidden;
background-color: #ffff00;
border-radius: 8px;
}
.my-welList .my-well, .my-welList .my-welr {
width: 360px;
background-color: #fff;
border-radius: 8px;
}
.my-chartMain{
position: relative;
}
.my-welList{
width: 756px;
margin: 0 auto;
padding-bottom: 25px;
}
.my-welList .my-well{ float: left;}
.my-welList .my-welr{ float: right;}
.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;}
.my-welList .lists{ position: relative; padding-left: 97px;}
.my-welList .my-li{ position: relative; height: 130px;}
.my-welList .my-lil{ float: left; width: 76px;}
.my-welList .my-lilPicM{ position: relative; display: block; overflow: hidden; width: 76px; height: 92px;}
.my-welList .my-lilPicM span{ display: block; position: absolute; left:; bottom:; 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;}
.my-welList .my-lilPicM img{ width: 76px; height: 92px; transform: scale(1,1); transition: all 0.2s;}
.my-welList .my-lilPicM:hover img{ transform: scale(1.2,1.2);}
.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;}
.my-welList .my-lir{ margin-left: 88px; line-height: 20px; font-size: 12px; color: #333;}
.flowerOne, .flowers {
position: absolute;
}
.flowerOne-top, .flowers-top {
position: absolute;
left:;
top:;
z-index:;
animation: rotation 8s infinite linear;
}
.flowerOne-bottom, .flowers-bottom {
position: absolute;
left:;
top:;
z-index:;
animation: rotation2 8s infinite linear;
}
.flowerTxt, .flowersTxt {
text-align: center;
position: relative;
z-index:;
color: #fff;
}
.flowerOne{
left: -69px;
top:;
width: 58px;
height: 60px;
}
.flowerTxt{
font-size: 30px;
line-height: 60px;
}
.flowerOne-top{
width: 58px;
height: 57px;
background: url('../i/flowerOne1.png') no-repeat 0 0;
}
.flowerOne-bottom{
width: 58px;
height: 60px;
background: url('../i/flowerOne2.png') no-repeat 0 0;
}
.flowers{
left: -46px;
top:;
width: 37px;
height: 39px;
}
.flowersTxt{
font-size: 18px;
line-height: 39px;
}
.flowers-top{
width: 37px;
height: 39px;
background: url('../i/flowers1.png') no-repeat 0 0;
}
.flowers-bottom{
width: 37px;
height: 39px;
background: url('../i/flowers2.png') no-repeat 0 0;
}
.btn-m{
margin-top: 2px;
}
.btn{
display: inline-block;
width: 75px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #f92f6e;
transition: all 0.2s;
}
.btn:hover{ text-decoration: none; background-color: #fc435b;}
.my-chartLine{
position: relative;
width: 756px;
margin: 0 auto;
padding: 26px 0 20px 0 ;
}
.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;}
.my-chartLine .chartLineflower1{ width: 65px; height: 69px; top: -23px; left:; background: url('../i/chartLineflower1.png') no-repeat 0 0; animation: chartLineflower 3s infinite linear alternate;}
.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;}
.my-chartLine .my-line1{ left: 152px; top: 51px; z-index:; animation: line1 3s 0.4s infinite ease-in alternate;}
.my-chartLine .my-line2{ left: 106px; top: 66px; z-index:; animation: line2 2s 0.1s infinite ease-in alternate;}
.my-chartLine .my-line3{ right: 141px; top: 51px; z-index:; animation: line3 3s 0.3s infinite ease-in alternate;}
.my-chartLine .my-line4{ right: 95px; top: 66px; z-index:; animation: line4 3s 0.3s infinite linear alternate;}
.strange-flower1{
position: absolute;
left: -162px;
top: 25px;
width: 133px;
height: 137px;
background: url('../i/strange-flower1.png') no-repeat 0 0;
}
.strange-flower2{
position: absolute;
right: -139px;
bottom: 220px;
width: 139px;
height: 176px;
background: url('../i/strange-flower2.png') no-repeat 0 0;
}
.legend-welfare{
position: relative;
background-color: #3c680c;
border-radius: 20px;
color: #d1ffa0;
z-index:;
padding: 25px 65px 40px 35px;
}
.legend-welfare .strange-flower3{ position: absolute; left: -124px; top: 182px; width: 177px; height: 148px; background: url('../i/strange-flower3.png') no-repeat 0 0;}
.legend-welfare h2{ line-height: 55px; font-size: 24px;}
.legend-welfare p{ font-size: 18px; line-height: 32px;}
后记：
这个是2016年5.1劳动节之前做的专题，因为是个专题小所以我postcss插件用的不是特别多
我个人的感受是 postcss 如果作为个人开发，个人维护 玩的666的话其实是要比sass,less有意思的
我之前开发sass基础混合宏里也有借鉴postcss插件的写法
因为postcss本身是个插件平台，你可以做一套属于你自己的‘兵器库’
但是如果是团队合作开发再有新手的话 他还需要适应的几乎可能没有正常css代码的节奏，比如说插件里的 改名 变量 简写 .... 还有可能我自己写一套自己的插件规则 增加了上手的时间
参考资料：
大漠 ： http://www.w3cplus.com/blog/tags/516.html
PostCSS 实战的更多相关文章
- Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue项目构建与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...
- webpack 多页应用架构系列实战
阅读目录 1.webpack配置了解 2.webpack CommonsChunkPlugin公共代码剥离 3.了解ProvidePlugin的用途 回到顶部 1.webpack配置了解 webpac ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】
缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...
- webpack3.x版本实战案例【基础配置篇】（一）
本文旨在通过一个一个实战例子来学习webpack如何配置,更加深入的学习webpack在实战项目中如何配置. 我们学习哪些配置呢? [基础配置] 打包JS 编译ES6 编译typeScript 打包公 ...
- 你一定喜欢看的 Webpack 2.× 入门实战(转载)
最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的时候是看了 zhangwang 的 <<入门 Webpack,看这篇就够了 ...
- 你一定喜欢看的 Webpack 2.× 入门实战
from:https://www.jianshu.com/p/b83a251d53db?utm_campaign=maleskine&utm_content=note&utm_medi ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
随机推荐
- FreeMarker 入门
目录 FreeMarker是什么 为什么要学习FreeMarker FreeMarker相关站点
- MVVM数据代理
MVVM数据代理 function MVVM(options) { this.$options = options || {}; var data = this._data = this.$optio ...
- Docker 概览
什么是Docker Docker是开发,运行和部署应用程序的开放管理平台. 开发人员能利用docker 开发和运行应用程序 运维人员能利用docker 部署和管理应用程序 Docker 平台介绍 Do ...
- NodeJs之word文件生成与解析
NodeJs之word文件生成与解析 一,介绍与需求 1.1,介绍 1,officegen模块可以为Microsoft Office 2007及更高版本生成Office Open XML文件.此模块不 ...
- 开发过程中，ps要做的事情
修改图片的分片率 把背景改为透明的 把一个图片的颜色要一下
- Python爬虫beautifulsoup4常用的解析方法总结
摘要 如何用beautifulsoup4解析各种情况的网页 beautifulsoup4的使用 关于beautifulsoup4,官网已经讲的很详细了,我这里就把一些常用的解析方法做个总结,方便查阅. ...
- css块居中
1.已知宽高的块级元素居中: 2.未知宽高的块级元素居中:
- Docker常用镜像
Docker,具有快捷方便的特性,机器上不需要安装软件和进行各种配置,拉取镜像,一行命令即可启动服务,不使用时,一行命令关闭容器即可,快捷方便,干净.利索.建议将本地的redis.mysql.kafk ...
- js slice 假分页
语法 arrayObject.slice(start,end) 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 ...
- ios端position为fixed失效的解决办法
关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...