您现在的位置是:首页 > 技术杂文前端杂文
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:
很赞哦! ()
下一篇:CSS实现模块抖动特效
随机图文
CSS盒子水平居中的六种方法
方法一:定位居中.child{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}方法二:margin居中.child{position:absolute;margin:auto;top:0;left:0;riJS将24小时格式转换为12小时
var dt = new Date();var hours = dt.getHours(); // 以24小时格式给出值var minutes = dt.getMinutes() ;var finalTime = "Time - " + hours + ":" + minutes;//finalTime