之前使用小程序带的animation动画 在iphone手机上挺顺畅 但是在某些安卓手机上就会出现卡顿的情况 所以今天使用css写一个动画 在各个型号手机都可以用 而且非常流畅 不会卡顿 通用的哦
先给小伙伴们上个效果图吧(这个gif费了我老大劲才搞出来)
效果图
代码直接上 不废话
html结构
css动画
.float-layout {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9999;
visibility: hidden;
transition: visibility 400ms cubic-bezier(0.36, 0.66, 0.04, 1);
&.active {
visibility: visible;
.float-mask {
opacity: 1;
}
.float-body {
transform: translate3d(0, 0, 0);
}
}
.float-mask {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 250ms ease-in;
}
.float-body {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
background: #fff;
z-index: 11;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: translate3d(0, 100%, 0);
transition: transform 320ms cubic-bezier(0.36, 0.66, 0.04, 1);
}
}
那么写完了该如何使用呢 点击需要弹出的按钮 给class为float-layout的标签添加active这个class 就可以弹出了 大家不妨可以试试 如果实在达不到这样的效果 可以滴滴我哦
有什么问题欢迎随时指出 嘻嘻嘻.