CSS3 文字忽大忽小效果样式收藏
.blink{ position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ animation-direction:alternate;/*轮流反向播放动画。*/ animation-timing-function: ease-in-out; /*动画的速度曲线*/ /* Safari 和 Chrome */ -webkit-animation:mymove 5s infinite; -webkit-animation-direction:alternate;/*轮流反向播放动画。*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ } @keyframes mymove { 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } } @-webkit-keyframes mymove /*Safari and Chrome*/ { 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } }
<div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat">12313213213</div>
滴水成冰,世间不存在毫无意义的付出,时间终会给你答案。