-webkit-font-smoothing，transition，transform動畫

時間 2019-11-21

標籤 webkit font smoothing transition transform 動畫简体版

原文原文鏈接

1.-webkit-font-smoothing

CSS3裏面加入了一個「-webkit-font-smoothing」屬性。這個屬性能夠使頁面上的字體抗鋸齒,使用後字體看起來會更清晰舒服。 css

none：文字的默認樣式，可能會出現模糊的鋸齒模樣 html

antialiased：無鋸齒，讓文字變得清晰可見 web

2.transform

transform的含義是：改變，使…變形；轉換字體

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，好比：rotatex() 和 rotatey() ，以此類推。動畫

下面咱們來分解各個屬性的用法： spa

transform:rotate()：

含義：旋轉；其中「deg」是「度」的意思，如「10deg」表示「10度」下同。 ssr

transform:skew()：

含義：傾斜；指針

transform:scale()：

含義：比例；「1.5」表示以1.5的比例放大，若是要放大2倍，須寫成「2.0」，縮小則爲負「-」。 code

transform:translate()：

含義：變更，位移；以下表示向右位移120像素，若是向上位移，把後面的「0」改個值就行，向左向下位移則爲負「-」。 orm

3.transition

transition容許CSS的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。」

transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。
transition-delay	規定過渡效果什麼時候開始。默認是 0。

過分的曲線效果

(linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
        ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
        ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
        ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
        ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
        cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內)

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s, transform 2s;
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
}
</style>
</head>
<body>

<div>請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。</div>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

在使用transition實現動畫的顯隱，不能使用display:none，要使用opacity：0或者opacity:1來實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。