HTML5 移动应用产品/商品信息卡片

Product Card。不错的一款衣服商品信息卡片，有悬停显示详情以及图片轮播动效。

电商，移动应用

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

第三方库
作品简介 2923
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

// Lift card and show stats on Mouseover
    $('#product-card').hover(function() {
        $(this).addClass('animate');
        $('div.carouselNext, div.carouselPrev').addClass('visible');
    }, function() {
        $(this).removeClass('animate');
        $('div.carouselNext, div.carouselPrev').removeClass('visible');
    });

// Flip card to the back side
    $('#view_details').click(function() {
        $('div.carouselNext, div.carouselPrev').removeClass('visible');
        $('#product-card').addClass('flip-10');
        setTimeout(function() {
            $('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo(80, 1, function() {
                $('#product-front, #product-front div.shadow').hide();
            });
        }, 50);

setTimeout(function() {
            $('#product-card').removeClass('flip90').addClass('flip190');
            $('#product-back').show().find('div.shadow').show().fadeTo(90, 0);
            setTimeout(function() {
                $('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
                setTimeout(function() {
                    $('#product-card').css('transition', '100ms ease-out');
                    $('#cx, #cy').addClass('s1');
                    setTimeout(function() {
                        $('#cx, #cy').addClass('s2');
                    }, 100);
                    setTimeout(function() {
                        $('#cx, #cy').addClass('s3');
                    }, 200);
                    $('div.carouselNext, div.carouselPrev').addClass('visible');
                }, 100);
            }, 100);
        }, 150);
    });

// Flip card back to the front side
    $('#flip-back').click(function() {

$('#product-card').removeClass('flip180').addClass('flip190');
        setTimeout(function() {
            $('#product-card').removeClass('flip190').addClass('flip90');

$('#product-back div.shadow').css('opacity', 0).fadeTo(100, 1, function() {
                $('#product-back, #product-back div.shadow').hide();
                $('#product-front, #product-front div.shadow').show();
            });
        }, 50);

setTimeout(function() {
            $('#product-card').removeClass('flip90').addClass('flip-10');
            $('#product-front div.shadow').show().fadeTo(100, 0);
            setTimeout(function() {
                $('#product-front div.shadow').hide();
                $('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
                $('#cx, #cy').removeClass('s1 s2 s3');
            }, 100);
        }, 150);

});

/* ----  Image Gallery Carousel   ---- */

var carousel = $('#carousel ul');
    var carouselSlideWidth = 335;
    var carouselWidth = 0;
    var isAnimating = false;

// building the width of the casousel
    $('#carousel li').each(function() {
        carouselWidth += carouselSlideWidth;
    });
    $(carousel).css('width', carouselWidth);

// Load Next Image
    $('div.carouselNext').on('click', function() {
        var currentLeft = Math.abs(parseInt($(carousel).css("left")));
        var newLeft = currentLeft + carouselSlideWidth;
        if (newLeft == carouselWidth || isAnimating === true) {
            return;
        }
        $('#carousel ul').css({
            'left': "-" + newLeft + "px",
            "transition": "300ms ease-out"
        });
        isAnimating = true;
        setTimeout(function() {
            isAnimating = false;
        }, 300);
    });

// Load Previous Image
    $('div.carouselPrev').on('click', function() {
        var currentLeft = Math.abs(parseInt($(carousel).css("left")));
        var newLeft = currentLeft - carouselSlideWidth;
        if (newLeft < 0 || isAnimating === true) {
            return;
        }
        $('#carousel ul').css({
            'left': "-" + newLeft + "px",
            "transition": "300ms ease-out"
        });
        isAnimating = true;
        setTimeout(function() {
            isAnimating = false;
        }, 300);
    });
});

编译

CSS

/* Generals resets and unimportant stuff */

* {
    margin: 0px;
    padding: 0px;
}
body {
    background: #eaebec;
    font-family: "Open Sans", sans-serif;
}
#make-3D-space {
    position: relative;
    perspective: 800px;
    width: 340px;
    height: 500px;
    transform-style: preserve-3d;
    transition: transform 5s;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -167px;
}
#product-front,
#product-back {
    width: 335px;
    height: 500px;
    background: #fff;
    position: absolute;
    left: -5px;
    top: -5px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#product-back {
    display: none;
    transform: rotateY(180deg);
}
#product-card.animate #product-back,
#product-card.animate #product-front {
    top: 0px;
    left: 0px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#product-card {
    width: 325px;
    height: 490px;
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: hidden;
    transform-style: preserve-3d;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}
div#product-card.flip-10 {
    -webkit-transform: rotateY(-10deg);
    -moz-transform: rotateY(-10deg);
    -o-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    transition: 50ms ease-out;
}
div#product-card.flip90 {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    transition: 100ms ease-in;
}
div#product-card.flip190 {
    -webkit-transform: rotateY(190deg);
    -moz-transform: rotateY(190deg);
    -o-transform: rotateY(190deg);
    transform: rotateY(190deg);
    transition: 100ms ease-out;
}
div#product-card.flip180 {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: 150ms ease-out;
}
#product-card.animate {
    top: 5px;
    left: 5px;
    width: 335px;
    height: 500px;
    box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}
.stats-container {
    background: #fff;
    position: absolute;
    top: 386px;
    left: 0;
    width: 265px;
    height: 300px;
    padding: 27px 35px 35px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
#product-card.animate .stats-container {
    top: 272px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.stats-container .product_name {
    font-size: 22px;
    color: #393c45;
}
.stats-container p {
    font-size: 16px;
    color: #b1b1b3;
    padding: 2px 0 20px 0;
}
.stats-container .product_price {
    float: right;
    color: #48cfad;
    font-size: 22px;
    font-weight: 600;
}
.image_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #48daa1;
    opacity: 0;
}
#product-card.animate .image_overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
.product-options {
    padding: 2px 0 0;
}
.product-options strong {
    font-weight: 700;
    color: #393c45;
    font-size: 14px;
}
.product-options span {
    color: #969699;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}
#view_details {
    position: absolute;
    top: 112px;
    left: 50%;
    margin-left: -85px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 19px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 0;
    width: 172px;
    opacity: 0;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
#view_details:hover {
    background: #fff;
    color: #48cfad;
    cursor: pointer;
}
#product-card.animate #view_details {
    opacity: 1;
    width: 152px;
    font-size: 15px;
    margin-left: -75px;
    top: 115px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}
div.colors div {
    margin-top: 3px;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    float: left;
}
div.colors div span {
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
}
div.colors div span:hover {
    width: 17px;
    height: 17px;
    margin: -1px 0 0 -1px;
}
div.c-blue span {
    background: #6e8cd5;
}
div.c-red span {
    background: #f56060;
}
div.c-green span {
    background: #44c28d;
}
div.c-white span {
    background: #fff;
    width: 14px;
    height: 14px;
    border: 1px solid #e8e9eb;
}
div.shadow {
    width: 335px;
    height: 520px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}
#product-back div.shadow {
    z-index: 10;
    opacity: 1;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
}
#flip-back {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
#cx,
#cy {
    background: #d2d5dc;
    position: absolute;
    width: 0px;
    top: 15px;
    right: 15px;
    height: 3px;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
#flip-back:hover #cx,
#flip-back:hover #cy {
    background: #979ca7;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
#cx.s1,
#cy.s1 {
    right: 0;
    width: 30px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#cy.s2 {
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#cy.s3 {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#cx.s1 {
    right: 0;
    width: 30px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#cx.s2 {
    -ms-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#cx.s3 {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all 100ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
#carousel {
    width: 335px;
    height: 500px;
    overflow: hidden;
    position: relative;
}
#carousel ul {
    position: absolute;
    top: 0;
    left: 0;
}
#carousel li {
    width: 335px;
    height: 500px;
    float: left;
    overflow: hidden;
}
.arrows-perspective {
    width: 335px;
    height: 55px;
    position: absolute;
    top: 218px;
    transform-style: preserve-3d;
    transition: transform 5s;
    perspective: 335px;
}
.carouselPrev,
.carouselNext {
    width: 50px;
    height: 55px;
    background: #ccc;
    position: absolute;
    top: 0;
    transition: all 200ms ease-out;
    opacity: 0.9;
    cursor: pointer;
}
.carouselNext {
    top: 0;
    right: -26px;
    -webkit-transform: rotateY(-117deg);
    -moz-transform: rotateY(-117deg);
    -o-transform: rotateY(-117deg);
    transform: rotateY(-117deg);
    transition: all 200ms ease-out;
}
.carouselNext.visible {
    right: 0;
    opacity: 0.8;
    background: #efefef;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transition: all 200ms ease-out;
}
.carouselPrev {
    left: -26px;
    top: 0;
    -webkit-transform: rotateY(117deg);
    -moz-transform: rotateY(117deg);
    -o-transform: rotateY(117deg);
    transform: rotateY(117deg);
    transition: all 200ms ease-out;
}
.carouselPrev.visible {
    left: 0;
    opacity: 0.8;
    background: #eee;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transition: all 200ms ease-out;
}
#carousel .x,
#carousel .y {
    height: 2px;
    width: 15px;
    background: #48cfad;
    position: absolute;
    top: 31px;
    left: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#carousel .x {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: 21px;
}
#carousel .carouselNext .x {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#carousel .carouselNext .y {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

HTML

<div id="make-3D-space">
    <div id="product-card">
        <div id="product-front">
            <div class="shadow"></div>
            <img src="/uploads/150301/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
            <div id="view_details">View details</div>
            <div class="stats">
                <div class="stats-container">
                    <span class="product_price">$39</span>
                    <span class="product_name">Addidas Originals</span>
                    <p>Men's running shirt</p>

<div class="product-options">
                        <strong>SIZES</strong>
                        <span>XS, S, M, L, XL, XXL</span>
                        <strong>COLORS</strong>
                        <div class="colors">
                            <div class="c-blue"><span></span>
                            </div>
                            <div class="c-red"><span></span>
                            </div>
                            <div class="c-white"><span></span>
                            </div>
                            <div class="c-green"><span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="product-back">
            <div class="shadow"></div>
            <div id="carousel">
                <ul>
                    <li><img src="/uploads/150301/t-shirt-large.png" alt="" />
                    </li>
                    <li><img src="/uploads/150301/t-shirt-large2.png" alt="" />
                    </li>
                    <li><img src="/uploads/150301/t-shirt-large3.png" alt="" />
                    </li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                </div>
            </div>
            <div id="flip-back">
                <div id="cy"></div>
                <div id="cx"></div>
            </div>
        </div>
    </div>
</div>

Product Card。不错的一款衣服商品信息卡片，有悬停显示详情以及图片轮播动效。

电商，移动应用

编辑器支持Emmet

快捷键

Product Card。不错的一款衣服商品信息卡片，有悬停显示详情以及图片轮播动效。

电商，移动应用

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：