美文网首页前端javascript
gulp-autoprefixer的使用

gulp-autoprefixer的使用

作者: 该帐号已被查封_才怪 | 来源:发表于2016-12-15 20:18 被阅读1200次

1、npm init；
2、npm install gulp；
3、npm install --save-dev gulp-autoprefixer；（安装gulp-autoprefixer ）
4、配置gulpfile.js文件；

我的gulpfile.js文件内容:

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
 
gulp.task('default', () =>
    gulp.src('./before/css.css')
        .pipe(autoprefixer({
            browsers: ['> 5%'], // 重要配置 详见下面
            cascade: false //  是否美化属性值 
        }))
        .pipe(gulp.dest('./before/dist'))
);

我的package.json文件内容：

{
  "name": "css3post",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "gulp-autoprefixer": "^3.1.1",
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "gulp-autoprefixer": "^3.1.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

5、gulp （因为gulpfile.js文件中gulp.task为'default'，所以这里可以直接输入gulp就可以执行了）

Paste_Image.png

完成前的css文件：

.circularA{
    width: 100px;
    height:100px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #6633FF;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}
.circularB{
    width: 100px;
    height:100px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #FF6699;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}
.shadow{
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    margin: 10px;
    width: 50%;
    height: 50%;
    color: #666;
    transform: rotate(-7deg);
}
.shadow>img{
    width: 90%;
    height: 90%;
    margin-top: 20px;
}

.change2d{

    color: #666;
    text-align: center;
    width: 300px;
    margin: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transform: rotate(9deg);

  }
.change2d>img{
    margin-top: 20px;
    width: 90%;
    height: auto;
    color: #666;
    cursor: pointer;

}
.change2d:hover{
    transform: matrix(1.5,0,0,1.5,50,50);
    transition: all 1s;
}
.change3d{

    color: #666;
    text-align: center;
    width: 300px;
    margin: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.change3d>img{
    margin-top: 20px;
    width: 90%;
    height: auto;
    color: #666;
    cursor: pointer;

}
.ct-3d{

    perspective: 160;
    perspective-origin:150% center;

}
.change3d:hover{
    transform:rotateX(5deg) translate3d(250px,50px,10px);
    transition: all 1s;
}
.bgGradient{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: repeating-radial-gradient(red ,green,blue 10%);
}
.transitionEg{
    width: 300px;
    height: 500px;
    margin: 50px 10px 10px 150px;
    transform-style:preserve-3d;
}
.transitionEg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 400px;

}
.transitionEg img:nth-child(1){
    z-index: 1;
    opacity: .6;

}
.transitionEg img:nth-child(2){
    z-index: 2;

    transform: scaleZ(3) rotateX(45deg);

}
.transitionEg h3{
    position: absolute;
    top: 80%;
    left: 20%;

}
.transitionCt{
    position: relative;

    perspective: 4200;
    cursor: pointer;

}
.transitionCt:hover{

    perspective: 2200;
    transition: all 2s;
}
.btn{
    margin: 20px 10px 200px 10px;
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    font-weight: bolder;
    cursor: not-allowed;
    text-align: center;
    color: #fff;
    border-radius: 15px;
    background-color: #4caf39;
    box-shadow: 0 20px #999;
}
@keyframes myfirstAnimation {
    from { }
    to{
        background-color: #0c8e35;
        box-shadow: 0 2px #666;
        transform: translateY(12px);
    }
}
.btn{

    animation: myfirstAnimation 2s linear 1.5s infinite;

}
.animateEg{
    height: 100px;
    width: 400px;
}

完成后的css文件：

.circularA{
    width: 100px;
    height:100px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #6633FF;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}
.circularB{
    width: 100px;
    height:100px;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #FF6699;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}
.shadow{
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    margin: 10px;
    width: 50%;
    height: 50%;
    color: #666;
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}
.shadow>img{
    width: 90%;
    height: 90%;
    margin-top: 20px;
}

.change2d{

    color: #666;
    text-align: center;
    width: 300px;
    margin: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);

  }
.change2d>img{
    margin-top: 20px;
    width: 90%;
    height: auto;
    color: #666;
    cursor: pointer;

}
.change2d:hover{
    -webkit-transform: matrix(1.5,0,0,1.5,50,50);
    transform: matrix(1.5,0,0,1.5,50,50);
    -webkit-transition: all 1s;
    transition: all 1s;
}
.change3d{

    color: #666;
    text-align: center;
    width: 300px;
    margin: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.change3d>img{
    margin-top: 20px;
    width: 90%;
    height: auto;
    color: #666;
    cursor: pointer;

}
.ct-3d{

    -webkit-perspective: 160;

    perspective: 160;
    -webkit-perspective-origin:150% center;
    perspective-origin:150% center;

}
.change3d:hover{
    -webkit-transform:rotateX(5deg) translate3d(250px,50px,10px);
    transform:rotateX(5deg) translate3d(250px,50px,10px);
    -webkit-transition: all 1s;
    transition: all 1s;
}
.bgGradient{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: -webkit-repeating-radial-gradient(red ,green,blue 10%);
    background: repeating-radial-gradient(red ,green,blue 10%);
}
.transitionEg{
    width: 300px;
    height: 500px;
    margin: 50px 10px 10px 150px;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
}
.transitionEg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 400px;

}
.transitionEg img:nth-child(1){
    z-index: 1;
    opacity: .6;

}
.transitionEg img:nth-child(2){
    z-index: 2;

    -webkit-transform: scaleZ(3) rotateX(45deg);

    transform: scaleZ(3) rotateX(45deg);

}
.transitionEg h3{
    position: absolute;
    top: 80%;
    left: 20%;

}
.transitionCt{
    position: relative;

    -webkit-perspective: 4200;

    perspective: 4200;
    cursor: pointer;

}
.transitionCt:hover{

    -webkit-perspective: 2200;

    perspective: 2200;
    -webkit-transition: all 2s;
    transition: all 2s;
}
.btn{
    margin: 20px 10px 200px 10px;
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    font-weight: bolder;
    cursor: not-allowed;
    text-align: center;
    color: #fff;
    border-radius: 15px;
    background-color: #4caf39;
    box-shadow: 0 20px #999;
}
@-webkit-keyframes myfirstAnimation {
    from { }
    to{
        background-color: #0c8e35;
        box-shadow: 0 2px #666;
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
}
@keyframes myfirstAnimation {
    from { }
    to{
        background-color: #0c8e35;
        box-shadow: 0 2px #666;
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
}
.btn{

    -webkit-animation: myfirstAnimation 2s linear 1.5s infinite;

    animation: myfirstAnimation 2s linear 1.5s infinite;

}
.animateEg{
    height: 100px;
    width: 400px;
}

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./../dist/css.css">

</head>
<body>
<div class="circularA">圆角</div>
<div class="circularB">圆形</div>
<div class="shadow">![](./lunbo2.jpg)<h3>美丽的风景</h3></div>
<div class="change2d">![](./lunbo1.jpg)<h3>鼠标放上去我会放大</h3></div>
<div class="ct-3d">
    <div class="change3d">![](./1.jpg)<h3>鼠标放上去我会移动和旋转</h3></div>
</div>
<div class="bgGradient"></div>
<div class="transitionCt">
<div class="transitionEg">
    ![](./lunbo3.jpg)
    ![](./lunbo3.jpg)
    <h3>鼠标放上来我会慢慢动</h3>
</div>
</div>

<div class="animateEg">
    <button class="btn">按钮正在被连续按下</button>
</div>


</body>
</html>

关于 browsers选项还可填写browsers: ['since 2010'] 等。具体详见：https://github.com/browserslist/browserslist#queries

image.png

**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *

相关文章

  • gulp-autoprefixer的使用

    1、npm init；2、npm install gulp；3、npm install --save-dev ...

  • gulp 配置及插件体系

    gulp 配置及插件体系 gulp-autoprefixer 的browsers参数详解 （传送门）： gulp...

  • 常用gulp插件

    sass的编译（gulp-sass）自动添加css前缀（gulp-autoprefixer）压缩css（gulp-...

  • gulp4 配置那些事情

    gulp-autoprefixer 配置 在 package.json 中添加对应浏览器的列表 gulp-less...

  • gulp配置

    一、组件 1、gulp-concat 代码合并 2、gulp-autoprefixer:css代码自动补全前缀 3...

  • gulp配置gulp-autoprefixer报出警告问题

    概述 最近在配置gulp-autoprefixer时，控制台报出警告： 在网上查找资料发现：是因为版本太高的原因，...

  • iconfont的使用（下载使用）

    1、下载文件 2、在生命周期中引入项目 beforeCreate () { var domModule = ...

  • Gson的使用--使用注解

    Gson为了简化序列化和反序列化的过程，提供了很多注解，这些注解大致分为三类，我们一一的介绍一下。 自定义字段的名...

  • 记录使用iframe的使用

    默认记录一下----可以说 这是我第一次使用iframe 之前都没有使用过； 使用方式： 自己开发就用了这几个属...

  • with的使用

    下面例子可以具体说明with如何工作： 运行代码，输出如下

网友评论

    本文标题：gulp-autoprefixer的使用

    本文链接：https://www.haomeiwen.com/subject/wcmgmttx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    前端

    javascript

    关于我们|服务条款|联系我们|gulp-autoprefixer的使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！