您现在的位置是:首页 > 技术杂文前端杂文

CSS实现模块抖动特效

阿龙2022-02-26【前端杂文】人已围观


页面刷新或是加载后,有些模块会有种从小到大抖动的效果,由于我这不是动态图片,所以并不是很明显(想看效果,可以复制代码运行看一下),但是这种CSS特效在需多官网都有看到过,实现方法如下:

HTML
<div class="wrap">
  <div class="box bounceIn"></div>
</div>
CSS
.box{
		width: 400px;
		height: 100px;
		background-color: burlywood;
	}
.wrap{
		width: 1190px;
		margin:  0 auto;
	}
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
			-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
			  }
			
			  0% {
			    opacity: 0;
			    -webkit-transform: scale3d(.3, .3, .3);
			    -ms-transform: scale3d(.3, .3, .3);
			    transform: scale3d(.3, .3, .3);
			  }
			
			  20% {
			    -webkit-transform: scale3d(1.1, 1.1, 1.1);
			    -ms-transform: scale3d(1.1, 1.1, 1.1);
			    transform: scale3d(1.1, 1.1, 1.1);
			  }
			
			  40% {
			    -webkit-transform: scale3d(.9, .9, .9);
			    -ms-transform: scale3d(.9, .9, .9);
			    transform: scale3d(.9, .9, .9);
			  }
			
			  60% {
			    opacity: 1;
			    -webkit-transform: scale3d(1.03, 1.03, 1.03);
			    -ms-transform: scale3d(1.03, 1.03, 1.03);
			    transform: scale3d(1.03, 1.03, 1.03);
			  }
			
			  80% {
			    -webkit-transform: scale3d(.97, .97, .97);
			    -ms-transform: scale3d(.97, .97, .97);
			    transform: scale3d(.97, .97, .97);
			  }
			
			  100% {
			    opacity: 1;
			    -webkit-transform: scale3d(1, 1, 1);
			    -ms-transform: scale3d(1, 1, 1);
			    transform: scale3d(1, 1, 1);
			  }
			}
			
			.bounceIn {
			  -webkit-animation-name: bounceIn;
			  animation-name: bounceIn;
			  -webkit-animation-duration: .75s;
			  animation-duration: .75s;
			}
 

Tags:

很赞哦! ()