溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css3如何實現(xiàn)字體放大縮小動畫”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3如何實現(xiàn)字體放大縮小動畫”吧！
實現(xiàn)方法：1、使用“@keyframes”規(guī)則和“transform:scale(縮放比例);”語句創(chuàng)建字體放大縮小動畫；2、使用“字體元素{animation:動畫名稱 時間 infinite;}”語句將縮放動畫應用于字體元素中即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用animation屬性、“@keyframes”規(guī)則、transform: scale()實現(xiàn)字體放大縮小動畫
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*css部分*/
@keyframes scaleDraw {
/*定義關鍵幀、scaleDrew是需要綁定到選擇器的關鍵幀名稱*/
0% {
transform: scale(1);/*開始為原始大小*/
}
25% {
transform: scale(1.5);/*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.5);
}
}
.ballon {
width: 150px;
height: 200px;
margin: 100px auto;
-webkit-animation-name: scaleDraw;/*關鍵幀名稱*/
-webkit-animation-timing-function: ease-in-out;/*動畫的速度曲線*/
-webkit-animation-iteration-count: infinite;/*動畫播放的次數(shù)*/
-webkit-animation-duration: 5s;/*動畫所花費的時間*/
/*可以簡寫為*/
/* animation: scaleDraw 5s ease-in-out infinite; */
/* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
}
</style>
</head>
<body>
<div class="ballon">歡迎來到億速云</div>
</body>
</html>
說明：
animation（動畫屬性）
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 | 3 |
| animation | 復合屬性。檢索或設置對象所應用的動畫特效。 | 3 |
| animation-name | 檢索或設置對象所應用的動畫名稱 ,必須與規(guī)則@keyframes配合使用，因為動畫名稱由@keyframes定義 | 3 |
| animation-duration | 檢索或設置對象動畫的持續(xù)時間 | 3 |
| animation-timing-function | 檢索或設置對象動畫的過渡類型 | 3 |
| animation-delay | 檢索或設置對象動畫的延遲時間 | 3 |
| animation-iteration-count | 檢索或設置對象動畫的循環(huán)次數(shù) | 3 |
| animation-direction | 檢索或設置對象動畫在循環(huán)中是否反向運動 | 3 |
| animation-play-state | 檢索或設置對象動畫的狀態(tài) | 3 |
@keyframes是CSS3的一種規(guī)則，可以用來定義CSS動畫的一個周期的行為，可以創(chuàng)建簡單的動畫。
@keyframes規(guī)則里是由一組封裝的CSS樣式規(guī)則組成的，這些規(guī)則描述了屬性值如何隨時間變化。
@keyframes animation-name {keyframes-selector {css-styles;}}keyframes-selector：定義動畫的百分比，它介于0％到100％之間。一個動畫可以包含許多選擇器。
然后，使用不同的CSS animation（動畫）屬性，可以控制動畫的許多不同方面，包括動畫迭代的次數(shù)，是否在開始和結束值之間交替，以及動畫是否應該運行或暫停。動畫也可以延遲其開始時間。
@keyframe規(guī)則由關鍵字“@keyframe”組成，后面接著是給出動畫名稱的標識符（將使用animation-name引用），隨后是通過一組樣式規(guī)則（用大括號分隔）。然后，通過使用標識符作為animation-name屬性的值，將動畫應用于元素。
語法：
/* 定義動畫*/
@keyframes 動畫名稱{
/* 樣式規(guī)則*/
}
/* 將它應用于元素 */
.element {
animation-name: 動畫名稱（在@keyframes中已經聲明好的）;
/* 或使用動畫簡寫屬性*/
animation: 動畫名稱 1s ...
}在大括號中，我們需要定義關鍵幀或航點，這些關鍵幀或航點指定在動畫期間的特定點處正在動畫化的屬性的值。這允許我們控制動畫序列中的中間步驟。
感謝各位的閱讀，以上就是“css3如何實現(xiàn)字體放大縮小動畫”的內容了，經過本文的學習后，相信大家對css3如何實現(xiàn)字體放大縮小動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
