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

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：

很赞哦！ ()

上一篇：css3的transform详解translate

下一篇：CSS实现模块抖动特效