浙江 杭州

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

系统分类: 网页特效 - html5 2015-09-19

人气7160

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       这是一款效果十分炫酷的html5购物车结算动画特效插件。该购物车结算动画提供了4种效果,每种效果都使用CSS3来制作炫酷的动画特效,这些效果使用户的购物结算体验大大的增强了。

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

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

使用方法

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

<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><!-- /checkout__summary -->
            <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><!-- /checkout__order-inner -->
    </div><!-- /checkout__order -->
</div><!-- /checkout -->
<div class="dummy-grid dummy-grid--filled">
    <div class="dummy-grid__item"></div>
    ......
</div><!-- /dummy-grid -->

CSS样式

当购物车按钮被点击的时候,.checkout--active类被激活,该类用于购物车结算界面的显示和隐藏动画。

.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;
}

下面是几个DEMO的截图效果:

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

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:347.89KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1132.html 非特殊说明,本文版权归原作者所有,转载请注明出处
html5炫酷购物车结算动画特效

我当前G币余额:0 已下载次数:2

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)