3D分享按钮

2018-02-08 10:20:11来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

1

<!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 ></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script><div >    <!-- Icon List -->    <a  href="#"></a>    <a  href="#"></a>    <a  href="#"></a>    <!-- Shelf Surface -->    <div ></div>    <div ></div>    <div ></div>    <div ></div></div><div >3d效果分享按钮</div></body></html>

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台