图片自动放大缩小，模拟”心脏跳动”

2019-04-14 17:42发布

站内文章 / 模拟电子
10379 0 1282
  /*给这个按钮创建一个动名名称：my_chage2 @-webkit-keyframes 'my_chage2' { from { -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } 50% { -moz-transform:scale(1.15,1.15); -webkit-transform:scale(1.15,1.15); -o-transform:scale(1.15,1.15); transform:scale(1.15,1.15); } to { -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } }   前半段时间图片从1扩大到1.15倍 后半段时间图片从1.15倍缩小至1倍 往复循环，实现图片不断扩大缩小，有点类似于“心脏跳动”   #hart_2,#hart_3 { /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/ -webkit-animation-name: "my_chage2"; /*动画名称，需要跟@keyframes定义的名称一致*/ -webkit-animation-duration: 2s;/*动画持续的时间长*/ -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/ }        

热门文章