css3基础笔记02

一，过渡：让某些属性按照渐渐的进行改变。
transition：
过渡的单独写法：

linear，ease-in，ease-out实际开发的时候 不会使用transition来制作太长的动画效果 所有使用默认的ease即可。

div{
  width: 100px;
  height: 100px;
  border: 1px solid gray;
/*指定属性，如果想要所有的都能够过渡 使用all即可。
*/
transition-property；width,height；
/* 持续时间 */
transition-duration:2s；
/* 延迟时间 */
transition-delay:1s,2s;/*（对应的是宽高）*/
/* 过渡的动画线型，匀速，限速，加速，减速 。*/
transition-timing-function：ease；
}
div:hover{
 width: 200px;
 height: 200px;
 background-color：hotpink；
 }

复合写法：

transition：width 1s 1s linear，height 1s 2s ease，background 1s 3s；

需要瞬间还原，只需要把复合写法放到hover里边即可。
1，demo：小米商品效果模拟

body{
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
 } 
 .container{
  width: 234px;
  height: 300px;
  margin: 100px auto;
  box-shadow: 0 0 1px #ccc;
  background-color: white;
  transition:all 1s;
 }
.container a{
  display: block;
  width: 160px;
  height: 166px;
  margin:0 auto;
}
.container a img{
  display: block;
  width: 100%;
}
.container:hover{
  box-shadow: 0px 30px 30px #ccc;
}

2，边框圆角：
两个（左上 右下）
三个（左上 右上+左下 右下）
四个（左上 右上 右下 左下）
border-radius：10px 50px 30px 20px;

3, 2D变换语法：
transform：translate（Xpx，Ypx）；
①变换移动translate：
transform：translateX（xpx） translateY（ypx）；
②缩放scale：设置的是比例

div:hover{
transform：scale（.5,.5）;
transition:all 1s;
}

③旋转rotate，反转加负号即可

div:hover{
transform：rotate（360deg）;
transition:all 1s linear;
}

④扭曲skew：

transform：skew（45deg,0）;
transition:all 1s linear;

2D变换案例：

body,html{
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: skyblue;
  position: relative;
  overflow: hidden;
 } 
 img{
  position:absolute;
  bottom: 0px;
  left: 0px;
  transform:translateY(190px);
 }
 body:hover img{
  transform:translateY(-300px) translateX(800px) rotate(70deg);
  transition:all .5s;
 }

补充：
变换参照物

transform-origin：bottom right;
transform：rotate（60deg）;