2020-10-07 CSS 实现 —— 无限放大缩小,可以应用于跳动的气球等场景,效果如下

@keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/

 0%{

 transform: scale(1); /*开始为原始大小*/

 }

 25%{

 transform: scale(1.1); /*放大1.1倍*/

 }

 50%{

 transform: scale(1);

 }

75%{

 transform: scale(1.1);

 }

 }

.WarningShowArea{

width: 100%;

margin-left:5%;

margin-top:-50px;

float:left;

width: 100%;

 height: 100%;

-webkit-animation-name: scaleDraw; /*关键帧名称*/

 -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/

 -webkit-animation-iteration-count: infinite; /*动画播放的次数*/

-webkit-animation-duration: 5s; /*动画所花费的时间*/

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。