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

CSS页面刷新后,板块飞入效果

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


如图,图中有三个部分,网页一刷新,三个部分会从左向右依次进入,有浅入深的感觉,现在这种效果用在很多官网上,比较常见,实现原理也很简单

HTML
<div class="wrap">
   <div class="box fls"></div>
</div>
CSS
.box{
	width: 400px;
	height: 100px;
    background-color: burlywood;
}
.wrap{
		width: 1190px;
		margin:  0 auto;
	}
.fls{	
		animation-name: fle;
		animation-duration:5s;
		}
@keyframes fle{
		0%{
			opacity: 0;
			transform: translate3d(-2000px,0,0);
			}
			100%{
				opacity: 1;
				transform: none;
				}
			}
如果说是上下,则只需要改动translate3d,里面对应三个参数,X、Y、3D

Tags:

很赞哦! ()