動畫 移動

css3過渡動畫:

transition:width 500ms(執行500毫秒) ease,height 500ms ease 500ms(延遲),background-color 500ms ease 1s
變成圓角
transition:border-radius 500ms ease;
所有的一起:
transition:all 500ms ease
div:nth-child(1){
transition:all 1s }

移動

.box{
....
position:
}
.box .pic_info{
width:
height:
background-color:
position:absolute;
left:
top:
transition:all 500ms ease;
}
.box hover .pic_info{
top:
}

變形:

位移:
transform:translate(50px,50px);
旋轉:
transform:rotate(30deg)
transform:rotate()

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • W3C標準中對css3的transition這是樣描述的:“css的transition允許css的屬性值在一定的...
    青春前行閱讀 1,427評論 0 5
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,328評論 0 11
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,792評論 0 2
  • 寫于2018年12月08日 我從不否認自己是一個特別矯情的人,所以你給我陽光我就燦爛給你看。 01 周六早上的宿舍...
    妤淑閱讀 630評論 2 5
  • 站了挺久了。他擺弄著手機。 周圍人群也陪同他一齊靜默地杵著。空氣很安靜,當然也很冷。 人群有點騷動了。“到了......
    少頃閱讀 163評論 0 2