当前位置：首页 > 网站模板 > 后台模板

html5炫酷购物车结算动画特效

分类：后台模板日期：2024-05-14 点击(4) 评论(0)

html5炫酷购物车结算动画特效

简介

###### 简要教程简要教程
这是一款效果非常炫酷的 HTML5 购物车结算动画特效。在购物网站的UI设计中，购物车的结算功能的设计是至关重要的一部分。如何设计购物车结算功能界面才能让用户得到最好的体验，如果设计得好，它可以为用户带来一个愉快的购物历程，如果设计得不好，那么一大堆东西堆积在购物车中，用户也不知道如何去处理它们。

注意在DEMO中使用了很多新的 CSS3 属性，只有现代浏览器才支持它们。IE浏览器不支持在表格行中使用CSS transformation，所以如果使用IE内核的浏览器查看DEMO时，一些表格行的动画效果可能看不到。

##### 使用方法
我们来看一下DEMO1-CORNER FLAT的制作方法。它的html结构中，漂亮的背景使用SVG矢量图来制作。div.checkout__order是弹出的购物车结算界面，里面使用一个表格来做购物清单的排版。div.dummy-grid是8个商品缩略图。

```html
<div class="checkout__order">
        <div class="checkout__order-inner">
            <table class="checkout__summary">
                <thead>
                    <tr><th>Your Order</th><th>Price</th></tr>
                </thead>
                <tfoot>
                    <tr><th colspan="2">Total <span class="checkout__total">$56.20</span></th></tr>
                </tfoot>
                <tbody>
                    <tr><td>Imitations <span>Mark Lanegan</span></td><td>$9.90</td></tr>
                    <tr><td>In The Silence <span>geir</span></td><td>$5.50</td></tr>
                    <tr><td>Out Of Exile <span>Audioslave</span></td><td>$11.00</td></tr>
                    <tr><td>London <span>Frank Sinatra</span></td><td>$19.90</td></tr>
                    <tr><td>Cure For Pain <span>Morphine</span></td><td>$9.90</td></tr>
                </tbody>
            </table>
            <button class="checkout__option checkout__option--silent checkout__cancel"><i class="fa fa-angle-left"></i> Continue Shopping</button><button class="checkout__option">Buy</button>
            <button class="checkout__close checkout__cancel"><i class="icon fa fa-fw fa-close"></i>Close</button>
        </div>
    </div>
</div>
<div class="dummy-grid dummy-grid--filled">
    <div class="dummy-grid__item"></div>
    ......
</div>
```
##### 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;
}
```

web299.com

html5炫酷购物车结算动画特效

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面