电子钱包（Visa | Amex）界面设计

Wallet Widget 左边选择钱包（在线支付方式）类型，右边显示钱包详情。

界面组件

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2467
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function($) {
    $(document).ready(function() {

// Card Shuffle 
        function sortCards() {
            var cards = $('.account:not(.is-selected)', '.my-wallet-sidebar'),
                i = 0;

$('.is-stationary').removeClass('is-stationary');

cards.each(function(i) {
                var index = i;

$(this).css({
                    'top': (180 / (cards.length - 1)) * index + 'px'
                });

i++;

if (cards.length === i || cards.length <= 2) {
                    $(this).addClass('is-stationary');
                }
            }); // END each
        }

sortCards();

// Set active account
        $(document).on('click', '.my-wallet-sidebar .account:not(.is-selected)', function() {
            var card = $(this),
                account = $('[data-account="' + $(this).attr('data-account') + '"]'),
                selected = $('.is-selected'),
                placeholder = $('.transaction-history-placeholder');

account.addClass('is-selected');
            placeholder.addClass('is-hidden');
            selected.removeClass('is-selected');
            setTimeout(sortCards, 10);
        });

// Add Account
        $('.account-number').mask('9999 9999 9999 9999', {
            placeholder: '**** **** **** ****'
        });
        $.mask.definitions['a'] = '';
        $('.account-expiration').mask('Valid Thru: 99/99');

// Modal
        $('.add-account').on('click', function() {
            $('.add-account-modal').addClass('is-visible');
        });

function addAccount() {
            var accountNum = $('input.account-number').val(),
                accountExp = $('input.account-expiration').val(),
                cardType = $('.account-card-type.is-selected').attr('data-card-type'),
                accountsContainer = $('.accounts-container'),
                html,
                htmlHistory;

html = '<div class="account" data-account="' + accountNum.substr(15) + '">' + '<div class="account-card-type ' + cardType + '"></div>' + '<div class="account-number">**** **** **** ' + accountNum.substr(15) + '</div>' + '<div class="account-expiration">' + accountExp + '</div>' + '</div>';

htmlHistory = '<div class="account-details" data-account="' + accountNum.substr(15) + '"><div class="account-balance">Current Balance<div class="value-unit">$0.<sup class="value-subunit">00</sup></div></div><div class="temp-account">Pending New Account</div></div></div>';

if (accountNum != '' && accountExp != '') {
                accountsContainer.append(html);
                $('.account-details-container').append(htmlHistory);
                $('input.account-number, input.account-expiration').val('');
                $('.add-account-modal').removeClass('is-visible');
            } else {
                $('.new-account').addClass('has-error');
                setTimeout(function() {
                    $('.new-account').removeClass('has-error');
                }, 400);
            }
        }

var addAccountButton = $('.new-account button');

addAccountButton.on('click', function() {
            addAccount();
            sortCards();
        });

// Close modal on overlay click
        $('.add-account-modal .overlay').on('click', function() {
            $('.add-account-modal').removeClass('is-visible');
        });

// Select card type
        $('.new-account .account-card-type').on('click', function() {
            $('.account-card-type.is-selected').removeClass('is-selected');
            $(this).addClass('is-selected');
        });

});
})(jQuery);

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400|Roboto);
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    background-color: #ffcc66;
    color: #444751;
}
.my-wallet {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 20px #ffa61b;
    font-family: "Open Sans", sans-serif;
    height: 700px;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 880px;
}
.my-wallet-sidebar {
    background-color: #f2f2f2;
    color: #707584;
    float: left;
    height: 100%;
    padding: 50px;
    width: 360px;
}
.my-wallet-title {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 50px 0;
}
.my-wallet-title .add-account {
    -webkit-transition: color 200ms;
    -moz-transition: color 200ms;
    transition: color 200ms;
    color: #b2b2b2;
    float: right;
    font-size: 48px;
    line-height: 20px;
    position: relative;
}
.my-wallet-title .add-account:hover {
    color: #707584;
    cursor: pointer;
}
.loading {
    -webkit-animation: load 500ms ease forwards;
    -moz-animation: load 500ms ease forwards;
    animation: load 500ms ease forwards;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/ripple.svg") center no-repeat;
    z-index: 999;
}
.accounts-container {
    bottom: 50px;
    left: 50px;
    height: 330px;
    position: absolute;
}
.active-account {
    border: 4px solid #8393ca;
    border-radius: 4px;
    height: 150px;
    position: relative;
    width: 250px;
    z-index: 1;
}
.account,
.my-wallet-sidebar .account,
.add-account-modal .account {
    background-color: #fff;
    border: 2px solid #e1e1e1;
    border-radius: 4px;
    font-family: "Roboto", sans-serif;
    height: 150px;
    margin-bottom: 30px;
    padding: 15px;
    width: 250px;
}
.account-card-type {
    height: 44px;
    margin-bottom: 20px;
    width: 64px;
}
.account-card-type.is-visa {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/visa-card.svg") center no-repeat;
}
.account-card-type.is-amex {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/amex-card.svg") center no-repeat;
}
.account-card-type.is-mastercard {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/mastercard.svg") center no-repeat;
}
.account-number {
    letter-spacing: 0.09em;
    border: none;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    outline: none;
}
.account-expiration {
    border: none;
    bottom: 15px;
    color: #b2b2b2;
    font-size: 16px;
    left: 15px;
    outline: none;
    position: absolute;
}
.my-wallet-sidebar .account {
    -webkit-transition: top 500ms ease, -webkit-transform 200ms ease;
    -moz-transition: top 500ms ease, -moz-transform 200ms ease;
    transition: top 500ms ease, transform 200ms ease;
    position: absolute;
    top: 0;
    will-change: transform, top;
}
.my-wallet-sidebar .is-selected.account {
    top: -186px !important;
}
.my-wallet-sidebar .account:hover:not(.is-selected) {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
    cursor: pointer;
}
.my-wallet-sidebar .account:hover:not(.is-selected).is-stationary {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.account-details-container {
    font-family: "Open Sans", sans-serif;
    height: 100%;
    overflow: hidden;
    padding: 50px;
    position: relative;
}
.account-details {
    -webkit-transition: -webkit-transform 500ms ease, opacity 200ms ease;
    -moz-transition: -moz-transform 500ms ease, opacity 200ms ease;
    transition: transform 500ms ease, opacity 200ms ease;
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
    transform: translateX(110%);
    opacity: 0;
    position: absolute;
    top: 50px;
    width: 420px;
}
.account-details.is-selected {
    -webkit-transition: -webkit-transform 500ms ease, opacity 200ms 200ms ease;
    -moz-transition: -moz-transform 500ms ease, opacity 200ms 200ms ease;
    transition: transform 500ms ease, opacity 200ms 200ms ease;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.transaction-history-placeholder {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    color: #b2b2b2;
    font-size: 24px;
    font-style: italic;
    font-weight: normal;
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
}
.transaction-history-placeholder.is-hidden {
    opacity: 0;
}
.value-unit {
    color: #444751;
    font-size: 36px;
    font-weight: bold;
    position: relative;
}
.value-subunit {
    font-size: 0.6em;
    left: -0.5em;
    position: relative;
    top: 0.1em;
}
.account-balance {
    letter-spacing: 0.025em;
    border-bottom: 1px solid #b2b2b2;
    color: #707584;
    font-size: 24px;
    padding-bottom: 60px;
}
.account-balance .value-unit {
    float: right;
    right: -0.25em;
    top: -0.2em;
}
.transaction-history {
    height: 510px;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 30px;
    width: 450px;
}
.transaction {
    display: table;
    padding: 50px 0 0 38px;
    position: relative;
    width: 100%;
}
.transaction-details {
    display: table-cell;
    width: 80%;
}
.transaction-amount {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.transaction-amount .value-unit {
    font-size: 18px;
    font-weight: normal;
}
.transaction-merchant {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
.transaction-date {
    color: #b2b2b2;
    font-size: 14px;
}
.transaction:before {
    border-radius: 100%;
    border: 2px solid #e1e1e1;
    content: ' ';
    display: block;
    font-size: 14px;
    font-weight: bold;
    left: 0;
    line-height: 16px;
    height: 20px;
    position: absolute;
    text-align: center;
    top: 65px;
    width: 20px;
}
.transaction[data-transaction-type="debit"]:before {
    content: '\2013';
    line-height: 14px;
}
.transaction[data-transaction-type="debit"] .value-unit {
    color: #8393ca;
}
.transaction[data-transaction-type="credit"]:before {
    content: '\002B';
}
.transaction[data-transaction-type="credit"] .value-unit {
    color: #66cc33;
}
.add-account-modal {
    visibility: hidden;
}
.add-account-modal .overlay {
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    background: #ffcc66;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 9000;
}
.add-account-modal .account {
    -webkit-transform: translate3d(-50%, -30%, 0);
    -moz-transform: translate3d(-50%, -30%, 0);
    -ms-transform: translate3d(-50%, -30%, 0);
    -o-transform: translate3d(-50%, -30%, 0);
    transform: translate3d(-50%, -30%, 0);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
    border-color: #ffa61b;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    will-change: transform, opacity;
    z-index: 9001;
}
.add-account-modal .account-card-type {
    border-radius: 5px;
    float: left;
    margin-left: 12px;
}
.add-account-modal .account-card-type.is-visa {
    margin-left: 0;
}
.add-account-modal .account-card-type:hover {
    border: 3px solid #ffcc66;
    cursor: pointer;
}
.add-account-modal .account-card-type.is-selected {
    border: 3px solid #ffcc66;
}
.add-account-modal .account-number {
    letter-spacing: 0.03em;
}
.add-account-modal .account-expiration {
    color: #444751;
}
.add-account-modal .has-error.account {
    -webkit-animation: error 300ms ease forwards;
    -moz-animation: error 300ms ease forwards;
    animation: error 300ms ease forwards;
}
.add-account-modal button {
    background-color: #ffa61b;
    border-radius: 4px;
    border: 4px;
    color: #fff;
    float: right;
    font-size: 14px;
    padding: 5px 10px;
    position: relative;
    top: 60px;
    right: -20px;
}
.add-account-modal button:hover {
    background-color: #ffb31a;
    cursor: pointer;
}
.add-account-modal button:focus {
    outline: none;
}
.add-account-modal.is-visible {
    visibility: visible;
}
.add-account-modal.is-visible .account {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
}
.add-account-modal.is-visible .overlay {
    opacity: 0.8;
}
.temp-account {
    color: #b2b2b2;
    font-size: 24px;
    font-style: italic;
    padding: 50px 0;
    text-align: center;
}
@-webkit-keyframes load {
    from {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}
@-moz-keyframes load {
    from {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}
@keyframes load {
    from {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}
@-webkit-keyframes error {
    0% {
        margin-left: 0;
    }
    33% {
        margin-left: 30px;
    }
    66% {
        margin-left: -30px;
    }
    100% {
        margin-left: 0;
    }
}
@-moz-keyframes error {
    0% {
        margin-left: 0;
    }
    33% {
        margin-left: 30px;
    }
    66% {
        margin-left: -30px;
    }
    100% {
        margin-left: 0;
    }
}
@keyframes error {
    0% {
        margin-left: 0;
    }
    33% {
        margin-left: 30px;
    }
    66% {
        margin-left: -30px;
    }
    100% {
        margin-left: 0;
    }
}

HTML

<button>+ Add Account</button>
        </div>

</div>

<h1 class="my-wallet-title">My Wallet <div class="add-account">&#43;</div></h1>
        
        <div class="active-account"></div>

<div class="account" data-account="6337">
                <div class="account-card-type is-visa"></div>
                <div class="account-number">**** **** **** 6337</div>
                <div class="account-expiration">Valid Thru: 01/19</div>
            </div>

<div class="account" data-account="2558">
                <div class="account-card-type is-amex"></div>
                <div class="account-number">**** **** **** 2558</div>
                <div class="account-expiration">Valid Thru: 01/19</div>
            </div>

<div class="account" data-account="8253">
                <div class="account-card-type is-mastercard"></div>
                <div class="account-number">**** **** **** 8253</div>
                <div class="account-expiration">Valid Thru: 01/19</div>
            </div>

</div>

</div>

<div class="account-details-container">
        <div class="transaction-history-placeholder">Choose an Account</div>

<div class="account-balance">
                Current Balance
                <div class="value-unit">
                    $543.
                    <sup class="value-subunit">27</sup>
                    
                </div>
                
            </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Amazon.com</div>
                        <div class="transaction-date">Online Retailer - Jan. 19, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $85.
                            <sup class="value-subunit">38</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="credit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Payment - Thank You!</div>
                        <div class="transaction-date">Payment - Jan. 18, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $1365.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Netflix Subscription</div>
                        <div class="transaction-date">Subscription Services- Jan. 15, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $9.
                            <sup class="value-subunit">99</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">The Diamond</div>
                        <div class="transaction-date">Food & Drink- Jan. 15, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $55.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Target</div>
                        <div class="transaction-date">Retail - Jan. 14, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $23.
                            <sup class="value-subunit">62</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">RV Cafe</div>
                        <div class="transaction-date">Food & Drink - Jan. 12, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $3.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="credit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Payment - Thank You!</div>
                        <div class="transaction-date">Payment - Jan. 01, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $500.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

</div>

</div>

<div class="account-balance">
                Current Balance
                <div class="value-unit">
                    $152.
                    <sup class="value-subunit">34</sup>
                    
                </div>
                
            </div>

<div class="transaction" data-transaction-type="debit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Amazon.com</div>
                        <div class="transaction-date">Online Retailer - Dec. 19, 2015</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $152.
                            <sup class="value-subunit">34</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="credit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">New Account</div>
                        <div class="transaction-date">New Account - July 12, 2015</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $0.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

</div>

</div>

<div class="account-balance">
                Current Balance
                <div class="value-unit">
                    $22.
                    <sup class="value-subunit">98</sup>
                    
                </div>
                
            </div>

<div class="transaction" data-transaction-type="credit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Payment - Thank You!</div>
                        <div class="transaction-date">Payment - Jan. 18, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $274.
                            <sup class="value-subunit">35</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

<div class="transaction" data-transaction-type="credit">
                    <div class="transaction-details">
                        <div class="transaction-merchant">Payment - Thank You!</div>
                        <div class="transaction-date">Payment - Jan. 01, 2016</div>
                    </div>
                    
                    <div class="transaction-amount">
                        <div class="value-unit">
                            $500.
                            <sup class="value-subunit">00</sup>
                            
                        </div>
                        
                    </div>
                    
                </div>

</div>

</div>

</div>

</div>

Wallet Widget 左边选择钱包（在线支付方式）类型，右边显示钱包详情。

界面组件

编辑器支持Emmet

快捷键

Wallet Widget 左边选择钱包（在线支付方式）类型，右边显示钱包详情。

界面组件

React.js 可拖放文件的上传表单（支持多文件和进度显示）

任务完成（成功）页面的UI设计模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：