這篇“css如何實現(xiàn)圖片放大縮小動畫”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css如何實現(xiàn)圖片放大縮小動畫”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細步驟清晰，細節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了綏化免費建站歡迎大家使用！
方法：1、使用“@keyframes 動畫名稱{}”規(guī)則和“transform:scale(縮放比例);”語句創(chuàng)建放大縮小動畫；2、使用“圖片元素{animation:動畫名稱 時間 infinite;}”語句縮放動畫應(yīng)用于圖片元素中。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用animation屬性、“@keyframes”規(guī)則、transform: scale()實現(xiàn)圖片放大縮小動畫。
示例1：
重慶分公司
重慶分公司
/*css部分*/
@keyframes scaleDraw { /*定義關(guān)鍵幀、scaleDrew是需要綁定到選擇器的關(guān)鍵幀名稱*/
0%{
transform: scale(1); /*開始為原始大小*/
}
25%{
transform: scale(1.1); /*放大1.1倍*/
}
50%{
transform: scale(1);
}
75%{
transform: scale(1.1);
}
}
.ballon{
width: 150px;
height: 200px;
background: url("images/balloon.png");
background-size: 150px 200px;
-webkit-animation-name: scaleDraw; /*關(guān)鍵幀名稱*/
-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;
效果：
實例2：
