css中的一些負值

2022-09-19 06:45:13 字數 1204 閱讀 3227

通常，我們要實現乙個元素的 180° 翻轉，我們會使用 transform: rotate(180deg)，這裡有個小技巧，使用 transform: scale(-1) 可以達到同樣的效果。看個 demo：

css nagative scale(-1)


.scale 


@keyframes scale 


100% 


}
看看效果：

（gif 中第一行是使用了 transform: rotate(180deg) 的效果）

我們知道，css 動畫及過渡提供了乙個 delay 屬性，可以延遲動畫的進行。

考慮下面這個動畫：

簡單的**大概是這樣：



.item 


.item:nth-child(1) 


.item:nth-child(2) 


.item:nth-child(3) 


@keyframes rotate 


}
如果，我們想去掉這個延遲，希望在一進入頁面的時候，3 個球就是同時運動的。這個時候，只需要把正向的 animation-delay 改成負向的即可。

.item:nth-child(1) 


.item:nth-child(2) 


.item:nth-child(3)
這裡，有個小技巧，被設定了 animation-dealy 為負值的動畫會立刻執行，開始的位置是其動畫階段中的乙個階段。所以，動畫在一開始的時刻就是下面這樣：

以上述動畫為例，乙個被定義執行 3s 的動畫，如果 animation-delay 為 -1s，起點相當於正常執行時，第2s（3-1）時的位置。

CSS中的一些術語

正常流 這是指西方語言文字從左向右，從上到下顯示，這也是我們熟悉的傳統html文件的文字布局。注意，在非西方語言中，流方向可能不同。大多數元素都在正常流中，要讓乙個元素不在正常流中，唯一的辦法就是使之成為浮動或者定位元素。非替換元素 如果元素的內容包含在文件中，則稱之為非替換元素。例如，如果乙個段落...

CSS中的一些樣式

css在這裡插入 片 moz placeholder 火狐瀏覽器padding 0 15px 表示在原有的基礎上，上下不動，左右拓展15畫素，可以有效地使詞與詞之間保持相同的距離，不管詞中字數是否一致 定義字型的粗細 font weight normal 預設值，定義正常的字元 bold 粗體 bo...

CSS中的一些屬性

css背景屬性 css能夠描述背景，包括背景顏色 背景 背景重複方向等屬性，這些屬性為頁面背景的樣式控制提供了強大的支援，這些屬性包括如下所示 1 背景顏色屬性 background color 該屬性為html元素設定背景顏色。2 背景屬性 background image 該屬性為html元素設...