1.變化 transform

屬性：偏移 translate? ? transform:translate(30px,40px);? ? ?比原來的位置右移30px，下移40px

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? transform:translateY(20px);? ? ? ? ? ? 下移20px

? ? ? ? ? 縮放 scale? ? ? ? ? transform:scale(3,4);? ? ? ? ? ? ? ? ? ? ? ?水平方向放大3倍，垂直方向放大4倍

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??transform:scaleY(3);? ? ? ? ? ? ? ? ? ? ? ?垂直方向放大3倍

? ? ? ? ? 旋轉 rotate? ? ? ? transform：rotate（50deg）;? ? ? ? ?順時針旋轉50度

? ? ? ? ? 傾斜 skew? ? ? ? ? transform:skew（30deg）;? ? ? ? ? ? ?傾斜30度

? ? ? ? ? 參考點? ? ? ? ? ? ? ? transform-origin:right bottom? ? ? ? 以右下點旋轉

2.過渡? transition

transition:過渡對象? ?時間? ?速度? ?延遲時間

transition:scale(3,4)? .7s? linear? 1s;

延遲1秒后，水平放大3倍垂直放大4倍的變化，在0.7秒內勻速變化

3.自定義動畫

兩種定義方式

第一種：背景色從紅色變成綠色

@keyframes?自定義名字{

form{

? ? ? ? ?background:red;

? ? ? ? }

to{

? ? background:green;

? ? }

}

第二種:?根據設置百分比來控制變化，從紅變藍變綠

@keyframes?自定義名字{

0%{

? ? ? background:red;

? ? ?}

50%{

? ? ? ? background:blue;

? ? ? ?}

100%{

? ? ? ? ? background:green;

? ? ? ? ?}

}

調用方式：animation:自定義名字? 3s? ?linear? 1s? infinite? alternate;

3s:變化時間

linear：勻速變化

1s：延遲1秒

infinite：循環

alternate：原路返回

4 媒體查詢? 響應式頁面（根據尺寸不同的大小，可以調用不同的css）

兩種寫法? ?

第一種：在link中查詢

寫幾個獨立css，在link中全部調用

例如：

? ? <link rel="stylesheet" href="css1.css" media="all and (min-width:992px)">

? ? <link rel="stylesheet" href="css2.css" media="all and (min-width:769px) and (max-width:991px)">

? ? <link rel="stylesheet" href="css3.css" media="all and (max-width:768px)">

第二種：在css中查詢

寫一個css，在css里查詢，各寫各的樣式

@media all and (min-width:992px){

? ? body{

? ? ? ? ? ? ? background: powderblue;

? ? ? ? ? ? }

}

@media all and (min-width:769px) and (max-width:991px){

? ? body{

? ? ? ? ? ? ? ?background: darkseagreen;

? ? ? ? ? ? ?}

}

@media all and (max-width:768px){

? ? body{

? ? ? ? ? ? ?background: yellow;

? ? ? ? ? ? ?}

}

? ? ??

5.data自定義屬性

格式：data-

<a href="" data-mail="zhangsan@qq.com">張三</a>

6.彈性盒子

display:flex;

display:inline-flex;

排列方式direction：

rtl? ? ? ? ? ? ? ? ? ? ? ?從左到右

row? ? ? ? ? ? ? ? ? ? 橫排

column? ? ? ? ? ? ? 豎排

row-reverse? ? ? ?反著橫排

column-reverse? 反著豎排

內容對齊

justify-content（左右）：

flex-start? ? ? ? ? ? ? ? 行頭緊挨填充

flex-end? ? ? ? ? ? ? ? ?向行尾緊挨填充

center? ? ? ? ? ? ? ? ? ? 居中緊挨填充

space-between? ? ? 平均分布在一行

align-items（上下）：

flex-start? ? ? ? ? ? ? ? 列頭緊挨填充

flex-end? ? ? ? ? ? ? ? ?向列尾緊挨填充

center? ? ? ? ? ? ? ? ? ? 居中緊挨填充

space-between? ? ? 平均分布在一列

? ? ??

轉載于:https://blog.51cto.com/13438273/2043664

總結

以上是生活随笔為你收集整理的11.18-11.19总结（transform，transition，媒体查询，弹性盒子）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。