一受扳、首先在wxml文件中寫(xiě)一個(gè)圖片的存放位置：
<image src="/images/heart_scale.png" class="heart"/> // src是圖片路徑携龟，可自己更改
二、最后設(shè)置一下圖片的樣式以及動(dòng)畫(huà)：
@[keyframes]中的關(guān)鍵幀參數(shù)可根據(jù)需要進(jìn)行修改
.heart {
animation-name: scaleDraw; /*關(guān)鍵幀名稱(chēng)*/
animation-timing-function: ease-in-out; /*動(dòng)畫(huà)的速度曲線(xiàn)*/
animation-iteration-count: infinite; /*動(dòng)畫(huà)播放的次數(shù)*/
animation-duration: 2s; /*動(dòng)畫(huà)所花費(fèi)的時(shí)間*/
}
@keyframes scaleDraw {
/*定義關(guān)鍵幀勘高、scaleDrew是需要綁定到選擇器的關(guān)鍵幀名稱(chēng)*/
0% {
transform: scale(1); /*開(kāi)始為原始大小*/
}
25% {
transform: scale(1.05); /*放大1.1倍*/
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.05);
}
}
轉(zhuǎn)載自：https://blog.csdn.net/qq_58800537/article/details/132122552
