图片闪烁,图片放大缩小动画效果

news/2024/10/23 5:39:32/

动画效果主要是用的animation属性.想要动画效果学习的牛,就躲对animation属性了解一下(我开始以为这个但是是动物的意思)

1.图片闪烁

 .amap-icon img{overflow: hidden;                               /* 溢出隐藏 */animation-name: breath; /*关键帧名称*/animation-timing-function: ease-in-out; /*动画的速度曲线*/animation-iteration-count: infinite; /*动画播放的次数*/animation-duration: 3s; /*动画所花费的时间*/}@keyframes breath {from { opacity: 0.1; }                          /* 动画开始时的不透明度 */50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */    
}
@-webkit-keyframes breath {from { opacity: 0.1; }                          /* 动画开始时的不透明度 */50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}

2.图片放大缩小动画效果

   .amap-icon img{overflow: hidden;                               /* 溢出隐藏 */    animation-name: scaleDraw; /*关键帧名称*/animation-timing-function: ease-in-out; /*动画的速度曲线*/animation-iteration-count: infinite; /*动画播放的次数*/animation-duration: 3s; /*动画所花费的时间*/} 
@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1); /*开始为原始大小*/}25% {transform: scale(1.1); /*放大1.1倍*/}50% {transform: scale(1);}75% {transform: scale(1.1);}
}