3D分享按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D按钮</title>
    <style type="text/css">
        body {
            background: #137FB4;
        }

        #shelf {
            -webkit-perspective: 500;
            position: relative;
            top: 150px;
            width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .icon {
            border: 0px solid rgba(0, 0, 0, 0.27);
            background-image: url("http://i64.tinypic.com/2jd1e8w.jpg");
            display: block;
            position: absolute;
            width: 56px;
            height: 56px;
            z-index: 50;
            cursor: pointer;
            top: -25px;
            left: 50px;
            -webkit-transition: all .2s ease;
        }

        .icon2 {
            border: 0px solid rgba(0, 0, 0, 0.27);
            border: 0px solid rgba(0, 0, 0, 0.27);
            background-image: url("http://i63.tinypic.com/zlx3q0.jpg");
            display: block;
            position: absolute;
            width: 56px;
            height: 56px;
            z-index: 50;
            cursor: pointer;
            top: -25px;
            left: 128px;
            -webkit-transition: all .2s ease;
        }

        .icon3 {
            border: 1px solid rgba(0, 0, 0, 0.27);
            border: 0px solid rgba(0, 0, 0, 0.27);
            background-image: url("http://i63.tinypic.com/2r59205.jpg");
            display: block;
            position: absolute;
            width: 56px;
            height: 56px;
            z-index: 50;
            cursor: pointer;
            top: -25px;
            left: 205px;
            -webkit-transition: all .2s ease;
        }

        .icon:hover,
        .icon2:hover,
        .icon3:hover {
            top: -32px;
        }

        .front,
        .back {
            border: 1px solid rgba(0, 0, 0, 0.27);
            background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252, 252, 252, 0.2)), to(rgba(191, 191, 191, 0.2)), color-stop(3%, rgba(247, 247, 247, 0.2)), color-stop(12%, rgba(242, 242, 242, 0.2)), color-stop(90%, rgba(217, 217, 217, 0.2)));
            background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -o-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -ms-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            -webkit-box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            -moz-box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            width: 300px;
            height: 15px;
            position: absolute;
            left: 0;
            top: 39px
        }

        .back {
            width: 273px;
            left: 13px;
            top: 13px;
            opacity: 0.2;
        }

        .top,
        .bottom {
            border: 1px solid rgba(0, 0, 0, 0.27);
            position: absolute;
            background-image: -webkit-gradient(linear, center top, center bottom, from(rgba(252, 252, 252, 0.2)), to(rgba(191, 191, 191, 0.2)), color-stop(3%, rgba(247, 247, 247, 0.2)), color-stop(12%, rgba(242, 242, 242, 0.2)), color-stop(90%, rgba(217, 217, 217, 0.2)));
            background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -o-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: -ms-linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            background-image: linear-gradient(top, rgba(252, 252, 252, 0.2), rgba(247, 247, 247, 0.2) 3%, rgba(242, 242, 242, 0.2) 12%, rgba(217, 217, 217, 0.2) 90%, rgba(191, 191, 191, 0.2));
            -webkit-box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            -moz-box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.3);
            width: 287px;
            height: 50px;
            left: 6px;
            -webkit-transform: rotateX(60deg);
        }

        .bottom {
            top: 15px;
            opacity: 0.2;
        }

        .text {
            position: absolute;
            bottom: 10;
            right: 10;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            border: none;
            font: normal 15px/1 "acme", Helvetica, sans-serif;
            color: #ffffff;
            text-align: center;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            word-spacing: 1px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        }

        .text:hover {
            font: normal 19px/1 "acme", Helvetica, sans-serif;
            -webkit-transition: all 550ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
            -moz-transition: all 550ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
            -o-transition: all 550ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
            transition: all 550ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
        }
    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">

</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<div id="shelf">

    <!-- Icon List -->
    <a class="icon" href="#"></a>
    <a class="icon2" href="#"></a>
    <a class="icon3" href="#"></a>


    <!-- Shelf Surface -->
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>

</div>


<div class="text">3d效果分享按钮</div>

</body>
</html>
猜你喜欢
