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 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>
.
相关推荐
【标题】"基于jQuery的类似旋转木马的3D分享按钮效果的实现代码"涉及到的主要技术是前端开发中的JavaScript库jQuery以及CSS3的3D变换。这个项目旨在创建一个动态的、具有视觉吸引力的分享按钮，它能呈现出旋转木马般...
之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮，它在鼠标按下时不仅从视觉上感受到3D立体的效果，而且...
今天我们要来分享一款基于CSS3的3D按钮特效，这款3D按钮利用了大部分CSS3特有的属性，首先是内凹，然后是外凸，最后再给按钮加上阴影，这些特效都是通过CSS3属性实现。另外，这款CSS3按钮还有一个特点是当鼠标滑过...
CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性...今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。
前面两个CSS3应用我们都介绍了对话框特效，这次还是要分享一款CSS3对话框插件，另外，这款对话框的特点是点击按钮后对话框会以3D旋转的动画特效展现出来。更令人惊叹的是，点击按钮的不同部位，对话框3D旋转的动画...
在本压缩包中，我们拥有一个集合了12种独特且炫酷的CSS3分享按钮特效的插件。这些特效为网页的社交分享功能增添了视觉吸引力，提升了用户与网站的互动性。 1. **3D翻转** (rotation.html)：这种特效通过CSS3的`...
记得很早以前我们分享过一款纯CSS3 3D按钮 按钮酷似牛奶般剔透，效果非常炫酷。这次我们要分享的同样是一款基于CSS3的3D按钮应用，这个按钮的特点是在黑色背景下，点击按钮会有弹性的动画特效，同时可以显示一个发光...
Flat UI是一款免费的Bootstrap主题，应用范围也是...今天我们要向大家分享一款基于Flat UI的3D按钮组合，按钮的颜色可以自己定义，关键是你选取的按钮背景色跟按钮下方边线颜色是否搭配，是否能产生3D立体的视觉效果。
今天要分享的这款CSS3按钮效果非常不错，是一款3D的按钮特效，当按钮按下时，按钮便会凹陷下去，效果和之前分享的CSS3超酷3D弹性按钮效果类似。另外，这款CSS3 3D按钮还有一个特点，按钮左侧边有漂亮的边线。
今天我们要来分享一款很富有3D立体视觉效果的CSS3按钮组合，类似这样的CSS3按钮我们还可以看这款CSS3灰色按钮菜单 超具3D立体感，效果也非常不错。今天的这款按钮组合可以有大尺寸和小尺寸按钮，鼠标滑过按钮时就会...
之前我们分享过一款非常酷的纯CSS3 3D按钮 按钮酷似牛奶般剔透，这款按钮的特点有二：牛奶般的立体外观，按钮按下时非常柔和的弹性效果。今天要分享的这款CSS3按钮和这款按钮差不错，也同样拥有3D的效果，按钮在按下...
之前我们分享过很多精彩的CSS3按钮，像这款纯CSS3 3D牛奶样式按钮，非常酷，还有这款CSS3发光社会分享按钮，也挺不错的。今天要分享的这款CSS3 3D按钮十分大气，按钮在点击的时候也有立体的效果，非常酷的一款CSS3 ...
在社会分享按钮的设计中，可能会用到旋转、缩放或位移来创建动态的3D效果。 5. **JavaScript**：虽然主要依赖CSS3，但JavaScript可能也用于增强这些按钮的功能，如计算分享计数、处理点击事件，或者在用户分享后...
基于jQuery的类似旋转木马的3D分享按钮效果的实现代码 基于jquery的利用z-index实现的多图层叠展示效果的代码 基于jquery的模拟windows8风格的菜单效果 基于jquery的实现的各种图片边界特效 基于jQuery的实现的适用...
今天我们要来分享一款基于CSS3的3D按钮特效，这款3D按钮利用了大部分CSS3特有的属性，首先是内凹，然后是外凸，最后再给按钮加上阴影，这些特效都是通过CSS3属性实现。另外，这款CSS3按钮还有一个特点是当鼠标滑过...
今天我们要来分享一款相对简易的纯CSS3 3D按钮，其实要实现按钮的3D效果也比较简单，边线、阴影、投影，掌握好这几方面，就可以实现CSS3的3D按钮效果。今天的这款3D按钮可以自己配置背景颜色，因此按钮色彩非常丰富...
这篇精华志主要探讨了如何使用C#语言创建一个自定义的3D按钮，并在GUI（图形用户界面）上实现动态效果。C#作为.NET Framework的主要编程语言，提供了丰富的功能来支持这种高级交互设计。 首先，3D按钮的实现涉及到...
但是今天要介绍一款CSS3社会分享按钮，这款分享按钮在鼠标滑过时会产生投影和发光效果，这些特效是由CSS3技术实现的，代码非常简单。而且，按钮在按下的时候也呈现出3D立体的效果。希望这款CSS3发光社会分享按钮可以...
有一段时间没有给大家分享漂亮的网页按钮了，这次要给大家带来一款外观非常新颖的CSS3线条3D按钮，一共有2组样式，每一组都是用纯CSS实现，鼠标滑过按钮时，按钮就会出现漂亮的线条，从而让按钮显得非常有立体感，...
本资源集合分享的“WPF 3D效果的样式”是初学者学习WPF 3D技术的一个宝贵资料，旨在促进大家共同学习和交流。 首先，我们需要理解WPF 3D的基础概念。WPF 3D是通过`Viewport3D`控件来实现的，它作为3D场景的容器，...