html5炫酷购物车结算动画特效
分类:后台模板 日期: 点击(4) 评论(0)

简介
......
```
##### CSS样式
当购物车按钮被点击的时候,.checkout--active类被激活,该类用于购物车结算界面的显示和隐藏动画。
```html
.checkout--active .checkout__button {
cursor: default;
-webkit-transform: translate3d(-490%, 0, 0);
transform: translate3d(-490%, 0, 0);
}
.checkout--active .checkout__order {
pointer-events: auto;
}
.checkout--active .checkout__order::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.checkout--active .checkout__order-inner {
opacity: 1;
-webkit-transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
.checkout--active .checkout__close {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition-delay: 0.015s;
transition-delay: 0.015s;
}
.checkout--active .checkout__summary tr {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
.checkout--active .checkout__summary tbody tr:nth-child(1) {
-webkit-transition-delay: 0.015s;
transition-delay: 0.015s;
}
.checkout--active .checkout__summary tbody tr:nth-child(2) {
-webkit-transition-delay: 0.03s;
transition-delay: 0.03s;
}
.checkout--active .checkout__summary tbody tr:nth-child(3) {
-webkit-transition-delay: 0.045s;
transition-delay: 0.045s;
}
.checkout--active .checkout__summary tbody tr:nth-child(4) {
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
}
.checkout--active .checkout__summary tbody tr:nth-child(5) {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
.checkout--active .checkout__summary tbody tr:nth-child(6) {
-webkit-transition-delay: 0.09s;
transition-delay: 0.09s;
}
.checkout--active .checkout__summary tfoot tr {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.checkout--active .checkout__option {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition-delay: 0.18s;
transition-delay: 0.18s;
}
```





