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）;