css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫

這篇文章主要講解了“css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫”吧！

創(chuàng)新互聯(lián)建站專注于岳麓企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城開發(fā)。岳麓網(wǎng)站建設(shè)公司,為岳麓等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

實(shí)現(xiàn)方法：1、使用“@keyframes”規(guī)則和“transform:scale(縮放比例);”語句創(chuàng)建字體放大縮小動(dòng)畫；2、使用“字體元素{animation:動(dòng)畫名稱時(shí)間 infinite;}”語句將縮放動(dòng)畫應(yīng)用于字體元素中即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用animation屬性、“@keyframes”規(guī)則、transform: scale()實(shí)現(xiàn)字體放大縮小動(dòng)畫

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			/*css部分*/
			@keyframes scaleDraw {

				/*定義關(guān)鍵幀、scaleDrew是需要綁定到選擇器的關(guān)鍵幀名稱*/
				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;/*關(guān)鍵幀名稱*/
				-webkit-animation-timing-function: ease-in-out;/*動(dòng)畫的速度曲線*/
				-webkit-animation-iteration-count: infinite;/*動(dòng)畫播放的次數(shù)*/
				-webkit-animation-duration: 5s;/*動(dòng)畫所花費(fèi)的時(shí)間*/

				/*可以簡寫為*/
				/* animation: scaleDraw 5s ease-in-out infinite; */
				/* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
			}
		</style>
	</head>

	<body>
		<div class="ballon">歡迎來到創(chuàng)新互聯(lián)</div>
	</body>
</html>

css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫

說明：

animation（動(dòng)畫屬性）

屬性	描述	CSS
@keyframes	定義一個(gè)動(dòng)畫,@keyframes定義的動(dòng)畫名稱用來被animation-name所使用。	3
animation	復(fù)合屬性。檢索或設(shè)置對象所應(yīng)用的動(dòng)畫特效。	3
animation-name	檢索或設(shè)置對象所應(yīng)用的動(dòng)畫名稱 ,必須與規(guī)則@keyframes配合使用，因?yàn)閯?dòng)畫名稱由@keyframes定義	3
animation-duration	檢索或設(shè)置對象動(dòng)畫的持續(xù)時(shí)間	3
animation-timing-function	檢索或設(shè)置對象動(dòng)畫的過渡類型	3
animation-delay	檢索或設(shè)置對象動(dòng)畫的延遲時(shí)間	3
animation-iteration-count	檢索或設(shè)置對象動(dòng)畫的循環(huán)次數(shù)	3
animation-direction	檢索或設(shè)置對象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)	3
animation-play-state	檢索或設(shè)置對象動(dòng)畫的狀態(tài)	3

@keyframes是CSS3的一種規(guī)則，可以用來定義CSS動(dòng)畫的一個(gè)周期的行為，可以創(chuàng)建簡單的動(dòng)畫。

@keyframes規(guī)則里是由一組封裝的CSS樣式規(guī)則組成的，這些規(guī)則描述了屬性值如何隨時(shí)間變化。

@keyframes animation-name {keyframes-selector {css-styles;}}

keyframes-selector：定義動(dòng)畫的百分比，它介于0％到100％之間。一個(gè)動(dòng)畫可以包含許多選擇器。

然后，使用不同的CSS animation（動(dòng)畫）屬性，可以控制動(dòng)畫的許多不同方面，包括動(dòng)畫迭代的次數(shù)，是否在開始和結(jié)束值之間交替，以及動(dòng)畫是否應(yīng)該運(yùn)行或暫停。動(dòng)畫也可以延遲其開始時(shí)間。

@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動(dòng)畫名稱的標(biāo)識(shí)符（將使用animation-name引用），隨后是通過一組樣式規(guī)則（用大括號分隔）。然后，通過使用標(biāo)識(shí)符作為animation-name屬性的值，將動(dòng)畫應(yīng)用于元素。

語法：

/* 定義動(dòng)畫*/
@keyframes 動(dòng)畫名稱{
    /* 樣式規(guī)則*/
}
/* 將它應(yīng)用于元素 */
.element {
    animation-name: 動(dòng)畫名稱（在@keyframes中已經(jīng)聲明好的）;
    /* 或使用動(dòng)畫簡寫屬性*/
    animation: 動(dòng)畫名稱 1s ...
}

在大括號中，我們需要定義關(guān)鍵幀或航點(diǎn)，這些關(guān)鍵幀或航點(diǎn)指定在動(dòng)畫期間的特定點(diǎn)處正在動(dòng)畫化的屬性的值。這允許我們控制動(dòng)畫序列中的中間步驟。

感謝各位的閱讀，以上就是“css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁名稱：css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫
URL標(biāo)題：http://www.chinadenli.net/article18/pecjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、標(biāo)簽優(yōu)化、Google、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3如何實(shí)現(xiàn)字體放大縮小動(dòng)畫