动画效果主要是用的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);
}
}
对了,推荐一个css大佬,张鑫旭,想css学习的N B,可以看看
❤如果文章对您有所帮助,就在文章的右上角或者文章的末尾点个赞吧!(づ ̄ 3 ̄)づ
❤如果喜欢比卡丘分享的文章,就给比卡丘点个关注吧!(๑′ᴗ‵๑)づ╭❤~
❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复讨论(请勿发表攻击言论)
拿走,不用谢!!!送人玫瑰,手留余香