Bulma CSS+ Vue.js 移动端翻转卡片UI模板 - 踏得网

Bulma + Vuejs Flip Card

bulma.css, vue.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        posts: [{
            id: 1,
            flip: false,
            avatar: 'http://loremflickr.com/g/64/64/men',
            image: 'http://loremflickr.com/g/320/240/paris',
            name: chance.name(),
            ssn: chance.ssn()
        }, {
            id: 2,
            flip: false,
            avatar: 'http://loremflickr.com/g/64/64/boys',
            image: 'http://loremflickr.com/g/320/240/amsterdam',
            name: chance.name(),
            ssn: chance.ssn()
        }, {
            id: 3,
            flip: false,
            avatar: 'http://loremflickr.com/g/64/64/women',
            image: 'http://loremflickr.com/g/320/240/london',
            name: chance.name(),
            ssn: chance.ssn()
        }, {
            id: 4,
            flip: false,
            avatar: 'http://loremflickr.com/g/64/64/girl',
            image: 'http://loremflickr.com/g/320/240/newyork',
            name: chance.name(),
            ssn: chance.ssn()
        }]
    },
    methods: {
        letsFlip: function(item) {
            this.posts.filter(function(v, k) {
                return v.id != item.id;
            }).forEach(function(v, k) {
                v.flip = false;
            })
            window.setTimeout(function(v, k) {
                item.flip = !item.flip;
            }, 100)
        },
        viewCard: function() {
            window.alert('view card!')
        }
    }
})

编译

CSS

#app {
    padding: 70px 0;
    background: #3273dc;
}
#app > .title,
#app > .subtitle {
    color: white;
}
.marvel-device {
    display: block;
    margin: 40px auto 0;
}
.marvel-device .screen {
    padding: 10px 0;
    text-align: left;
    overflow-y: scroll;
}
.flipper {
    margin: 0 auto 10px;
}
.flipper,
.card {
    cursor: pointer;
    height: 390px;
    margin: 0 auto 10px;
}
.back .button {
    padding: 10px 20px;
}
.is-centered-ver-hor {
    height: 100px;
    width: 50%;
    padding: 20px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* 3D FLIP CARD */

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.flipper.flip {
    transform: rotateY(180deg);
}
.front,
.back {
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.front {
    z-index: 2;
    /* for firefox 31 */
    
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(180deg);
}
/* STYLING SCROLLBAR */

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #9e9e9e;
}

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css">
<link rel="stylesheet prefetch" href="https://marvelapp.github.io/devices.css/assets/devices.min.css">
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="app">
    <h1 class="title is-1 has-text-centered">Bulma + VueJS Flip Card</h1>
    <h5 class="subtitle is-5 has-text-centered">
    credit : 
    <a href="https://bulma.io/">bulma</a>, 
    <a href="https://vuejs.org/">vuejs</a>, 
    <a href="https://marvelapp.github.io/devices.css/">devices.css</a>, 
    <a href="https://chancejs.com/">chancejs</a>, 
    <a href="https://davidwalsh.name/css-flip">css-flip</a>
  </h5>
    <div class="marvel-device nexus5">
        <div class="top-bar"></div>
        <div class="sleep"></div>
        <div class="volume"></div>
        <div class="camera"></div>
        <div class="screen">
            <div v-for="item in posts" class="flipper" v-bind:class="{'flip': item.flip}" v-on:click="letsFlip(item)">
                <figure class="front">
                    <div class="card">
                        <div class="card-image">
                            <figure class="image">
                                <img v-bind:src="item.image" alt="">
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="media">
                                <div class="media-left">
                                    <figure class="image is-32x32">
                                        <img v-bind:src="item.avatar" alt="Image">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <p class="title is-5">{{item.name}}</p>
                                    <p class="subtitle is-6">@{{item.ssn}}</p>
                                </div>
                            </div>
                            <div class="content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>.
                                <a href="#">#css</a> <a href="#">#responsive</a>
                                <br>
                                <small>11:09 PM - 1 Jan 2016</small>
                            </div>
                        </div>
                    </div>
                </figure>
                <figure class="back">
                    <div class="card">
                        <div class="card-content">
                            <div class="is-centered-ver-hor ">
                                <div class="media">
                                    <div class="media-left">
                                        <figure class="image is-32x32">
                                            <img v-bind:src="item.avatar" alt="Image">
                                        </figure>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-5">{{item.name}}</p>
                                        <p class="subtitle is-6">@{{item.ssn}}</p>
                                    </div>
                                </div>
                                <a class="button is-info is-outlined" v-on:click="viewCard()">
                                    <h3 class="title is-3">View Card</h3>
                                </a>
                            </div>
                        </div>
                    </div>
                </figure>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>