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,将指令指向该配置文件
