CSS3 属性/transition、animation 配合JS/贝塞尔曲线/webpack基础用法

CSS3

    1. 圆角 border-radius
        #box{
            border-radius: 10px;/*圆角10PX*/
            border-radius: 10px 50px;/*圆角左上右下10PX，右上左下50px*/
            border-radius: 10px/50px;/*圆角横向10px与纵向50px*/
            border-radius: 50%;/*圆角50%成为一个圆*/
        }
    2. 阴影 text-shadow、box-shadow
        #box{
            /*文字阴影*/
            text-shadow:横向偏移(10px) 纵向偏移(10px) 模糊度(0\10px) 颜色;
            /*盒子阴影*/
            box-shadow:内阴影(inset) 横向偏移 纵向偏移 模糊度 扩展范围(10px) 颜色;
        }
    3. 渐变 linear、radial
        #box{
            /*渐变,参数(方向,颜色 占比 ,渐变颜色 占比)颜色可多个*/
            background:-webkit-linear-gradient(left top,red 40%,blue 50%); 
           /*圆心渐变(方向,颜色 占比 ,渐变颜色 占比)颜色可多个*/
            background:-webkit-radial-gradient(red,blue);
        }
    4. rgba、opacity
        #box{
            background：rgba(0,0,0,.1);/*控制背景透明度,不包含文字*/
            opacity:0.3;/*控制整个盒子的透明度*/
        }
    5. transform 
        通常搭配transition使用、使用transform时,最好先给初始值.
        transform可以多效果组合使用
            当多个效果组合使用时,会先执行后面的效果在执行前面的效果,
            图片操作均是矩阵操作，矩阵操作最终首先生效的是最后一个,所以transform多效果组合使用时,最后一个先生效
        transform的3D效果(详情见2018-3-6)
            #box{
                transition:1s all ease;/*1秒钟 走完所有transform 使用先快后慢速度(执行速度可以用贝赛尔曲线);*/
                transform:perspective(600px) rotateX(0deg);/*transform的初始值*/
            }
            #box:active{
                transform:perspective(600px) rotateX(90deg);/*景深600px,X轴旋转90度,此处不设置景深就不会产生3D效果,景深默认无穷大,景深设置越小3D效果越小*/
            }
        1、rotate 旋转
            #box{
                transition:1s all ease;/*1秒钟 走完所有transform 使用先快后慢速度(执行速度可以用贝赛尔曲线);*/
                transform:rotate(0deg);/*transform的初始值*/
            }
            #box:active{
                transform:rotate(90deg);/*box被按下时旋转90度*/
            }
        2、scale 缩放
           #box:active{
                transform:scale(1,-1);/*进行横轴与纵轴的缩放,-1会出现盒子翻转效果*/
            }
        3、translate 平移
            #box:active{
                transform:translate(100px,200px);/*平移横轴与纵轴*/
            }
        4、skew 倾斜
            #box:active{
                transform:skew(100deg,200deg);/*横轴与纵轴倾斜的角度*/
            }
    6. 动画 transition(通常用赖做简单动画) animation(通常用来做复杂的链式动画)
        1、transition 分开控制不同属性的写法：
            transition:1s width ease,3s height ease;
        2、animation
            @keyframes widthAdd{
                0%{width:100px;}
                20%{width:300px;}
                100%{width:400px;}
            }
            #box:hover{
                animation:widthAdd 5s ease;/* 调用动画,5s执行时间,执行速度(执行速度可以用贝赛尔曲线)*/
            }
            //animation其余属性
            animation-fill-mode: forwards;/*停止后的模式*/
            animation-iteration-count: infinite;/*循环动画次数*/
            animation-direction: alternate;/*循环动画时,交替循环*/
            animation-delay: 2x;/*延迟*/

扩展

CSS3样式不会改变盒模型
    即CSS3的所有样式都不会改变盒子原有所占的空间大小;

使用DIV模拟按钮被按下
    #box{
      box-shadow: 5px 5px 0 black;
    }
    #box:active{
        box-shadow: inset 5px 5px 0 black;
    }
transition、animation都可以直接配合JS
    #box{
        transition:1s all ease;/*1秒钟 走完所有transform 使用先快后慢速度;*/
        transform:rotate(0deg);/*transform的初始值*/
    }
    使用JS配合:
    let oBox = document.getElementById('box');
    oBox.onclick = function(){
        this.style.width='400px';
    }
贝塞尔曲线
    cubic-bezier 百度就行了 一个破玩意;

webpack基础用法

        安装:cnpm i webpack -D
        安装JQ：cnpm i jquery -S//安装在生产依赖
            在js文件中顶部使用 import $ from 'jquery';来引入JQ组件
            然后使用webpack来编译这个JS文件,否则浏览器不认import.
            使用webpack编译命令如下：webpack 需要编译的文件位置/文件名  编译后的文件位置/文件名
        webpack的配置文件使用
            创建webpack.cogfig.js内容如下
                module.exports={
                    entry:'./src/test.js';//入口文件及路径
                    output:{
                        filename:'编译后的文件名',
                        path:`${__dirname}/dist/`//${__dirname}是node自带的,代表当前路径,dist是指编译后的文件所放的位置
                    }
                }
            配置好配置文件之后,直接使用命令行webpack即可完成打包编译;
            webpack.cogfig.js文件名字可以叫 xxx(任意).cogfig.js,使用时需要使用命令行webpack --config xxx(任意).cogfig.js,将指令指向该配置文件