hi，大家好，我是拾光。
今天给大家带来的是前端的部分功能模块，
以后的时间里还会给大家继续发布更多的模块内容。
希望大家看完了之后甩一个收藏关注哦~
1、CSS3按钮的另类做法
HTML代码：
<body>
<div id="box">
<div id="icon">
<i><em></em><span></span></i>
</div>
</div>
</body>
CSS:
body
{
margin: 0px;padding: 0px;
}
#box{
height: 31px;
width: 31px;
border-radius: 50%;
box-shadow: 0 0 0 1px #ccc inset;
margin: 100px;
transition:box-shadow 0.25s ease-in-out 0s,
transform 0.25s ease-in-out 0s;
}
#box:hover
{
box-shadow: 0 0 0 16px #039 inset;
/*transition:box-shadow 0.25s ease-in-out 0s; */
transform: rotate(180deg);
}
i
{
display: block;
height:6px;
width: 6px;
float:left;
position:relative;
top:13px;
left:10px;
}
em,span
{
width: 0px;
height: 0px;
border-style: solid dashed dashed dashed;
border-width: 5px;
border-color: transparent;
position: absolute;
left:0px;top:0px;
}
em{
border-top-color:#000;
top:1px;
}
span
{
border-top-color:#fff;
}
2、css3立体旋转导航菜单
HTML：
<body>
<ul class="menu">
<li class="home current">
<a href="#">
<span>Home</span>
<span>Home</span>
<span>Home</span>
<span>Home</span>
</a>
<ul>
<li><a href="">Sub Menu</a></li>
<li><a href="">Sub Menu</a></li>
</ul>
</li>
<li class="about">
<a href="#">
<span>About</span>
<span>About</span>
<span>About</span>
<span>About</span>
</a>
</li>
<li class="contact">
<a href="#">
<span>Contact</span>
<span>Contact</span>
<span>Contact</span>
<span>Contact</span>
</a>
<ul>
<li><a href="">Sub Menu</a></li>
<li><a href="">Sub Menu</a></li>
</ul>
</li>
<li class="twitter">
<a href="#">
<span>Twitter</span>
<span>Twitter</span>
<span>Twitter</span>
<span>Twitter</span>
</a>
</li>
</ul>
</body>
CSS：
body {
margin: 0;
padding: 0;
background: #f9f9f9;
}
.menu {
-webkit-perspective: 100000;
-moz-perspective: 100000;
-o-perspective: 100000;
-ms-perspective: 100000;
perspective: 1200;
display: block;
width: 800px;
height: 65px;
margin: 0 auto;
list-style: none;
padding: 0;
padding: 0 0 0 30px;
border-radius: 5px;
background-color: #546065;
}
.menu li {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 21px;
width: 140px;
margin: 0 10px 0 0;
float: left;
position: relative;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.menu li a {
display: block;
color: #fff;
font-weight: bold;
box-sizing: border-box;
height: inherit;
width: inherit;
font-size: 1.2em;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
.menu li a span {
height: inherit;
width: inherit;
padding: 22px 0;
text-align: center;
position: absolute;
left: 0;
display: block;
}
.current {
-webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
}
.menu li a span:first-of-type {
-webkit-transform: translateZ(74px);
-moz-transform: translateZ(74px);
-o-transform: translateZ(74px);
-ms-transform: translateZ(74px);
transform: translateZ(74px);
background-color: #3e4649;
box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1);
}
.menu li a span:nth-of-type(2) {
background: #fa623f;
box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);
-webkit-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
-moz-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
-o-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
-ms-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
}
.menu li a span:nth-of-type(3) {
background: #f8876d;
box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);
-webkit-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
-moz-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
-o-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
-ms-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
transform: rotate3d(1,0,0,180deg) translateZ(-9px);
}
.menu li a span:nth-of-type(4) {
background: #3e4649;
-webkit-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
-moz-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
-o-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
-ms-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
}
.menu > li:hover {
-webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
-ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
}
.menu > .current:hover {
-webkit-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
-moz-transform: rotate3d(1,0,0,90deg) translateZ(-64px);
-o-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
-ms-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
transform: rotate3d(1,0,0,-180deg) translateY(-44px);
}
.menu > .current span:nth-of-type(4), .menu > li:hover span:nth-of-type(4) {
background: #fa623f;
}
.menu > .current:hover span:nth-of-type(4) {
background: #f8876d;
}
.menu ul {
opacity: 0;
width: 100%;
border-radius: 0;
padding: 0;
}
.menu > li:hover ul {
opacity: 1;
height: auto;
background: #fa623f;
-webkit-transition: opacity 0.1s linear 0.3s;
-moz-transition: opacity 0.1s linear 0.3s;
-o-transition: opacity 0.1s linear 0.3s;
-ms-transition: opacity 0.1s linear 0.3s;
transition: opacity 0.1s linear 0.3s;
-webkit-transform: rotate3d(1,0,0, 90deg) translateY(114px);
-moz-transform: rotate3d(1,0,0, 90deg) translateY(115px);
-o-transform: rotate3d(1,0,0, 90deg) translateY(114px);
-ms-transform: rotate3d(1,0,0, 90deg) translateY(114px);
transform: rotate3d(1,0,0, 90deg) translateY(114px);
position: absolute;
left: 0;
top: 65px;
}
.menu > li ul {
-webkit-transform: rotate3d(1,0,0, 90deg);
-moz-transform: rotate3d(1,0,0, 90deg);
-o-transform: rotate3d(1,0,0, 90deg);
-ms-transform: rotate3d(1,0,0, 90deg);
transform: rotate3d(1,0,0, 90deg);
}
.menu > .current:hover ul {
-webkit-transform: rotate3d(1,0,0, 180deg) translateY(145px);
-moz-transform: rotate3d(1,0,0, 270deg) translateY(31px);
-o-transform: rotate3d(1,0,0, 180deg) translateY(141px);
-ms-transform: rotate3d(1,0,0, 180deg) translateY(161px);
transform: rotate3d(1,0,0, 180deg) translateY(161px);
top: 65px;
background: #f8876d;
}
.menu ul li {
display: block;
float: none;
border-radius: 0;
background: inherit;
width: 170px;
height: 40px;
}
.menu ul li a {
box-sizing: border-box;
padding: 8px 0 0 25px;
background: inherit;
width: inherit;
}
.menu ul li a:hover {
background-color: #eb350b;
}
.menu ul .current a:hover {
background-color: #ce5f45;
}
.menu .contact {
width: 170px;
}
#travel {
padding: 10px;
background: rgba(0,0,0,0.6);
border-bottom: 2px solid rgba(0,0,0,0.2);
font-variant: normal;
text-decoration: none;
margin-bottom: 50px;
}
#travel a {
font-family: 'Georgia', serif;
text-decoration: none;
border-bottom: 1px solid #f9f9f9;
color: #f9f9f9;
}
.header {
font-family: Arial, sans-serif;
text-align: center;
margin-bottom: 60px;
}
.header h2 {
font-size: 2em;
}
3、3D旋转导航栏
HTML：
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Products
<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
<li><a href="#" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
</a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
</a></li>
<li><a href="#" class="three-d">
Css3
<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
</a></li>
<li><a href="#" class="three-d">
JavaScript
<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
</a></li>
<li><a href="#" class="three-d">
Videogames
<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
</a></li>
</ul>
</div>
</body>
CSS：
@import url("http://www.w3cplus.com/demo/css3/base.css");
/*任务一：引入本地字体文件*/
@font-face {
font-family: 'sansationregular';
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color:#edecec;
}
/* basic menu styles */
.nav-menu {
display: block;
background: #74adaa;
width:950px;
margin: 50px auto 150px;
}
.nav-menu > li {
display: inline;
float:left;
border-right:1px solid #94c0be;
}
.nav-menu > li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/
font-family: 'sansationregular';
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}
/* animation domination */
.three-d {
/* 任务三、设置3D舞台布景 */
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
/*任务四、设置3D舞台布景过渡效果*/
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
-ms-transition: all .07s linear;
-o-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
-wekbit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-ms-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-ms-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
background-color: #51938f;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
display: block;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
今天就先分享到这些吧。大家可以根据你自己的需求来进行兼容不同的浏览器；
好久没有跟大家分享段子了，今天给大家发几个段子乐呵一下。
希望大家每天开心；
1、
公园里长椅上，一对小情侣依偎在一起旁若无人地说着情话， 女孩羞涩地问男孩：“要是我们结了婚生孩子，你是喜欢儿子还是女儿？” 男孩宠溺地刮了一下女孩的鼻梁，温柔地说：“只要是我的，我都喜欢！” 女孩噗嗤一笑，轻轻锤了一下男孩的胸口：“你好坏！要求真高！”
2、
老师：“好了，让我们来统计一下独生子女，应该都是吧”
小明：“老师，我不是，”
老师：“哦那你有个什么？”
小明：“我有个弟弟”
老师：“哦，那他多大了？”
小明：“18厘米”
老师红着脸：“不要脸，下课滚到我办公室，我要好好教育你！”
3、
一男一女是网友，聊了很长时间，一天，男的忽然提起
男：我俩见个面吧。
女：行，但是你要先回答我个问题。
男：你问吧。
女：你抬头挺胸向下看，看到了什么？
男：脚啊！
女：我俩不合适。
4、
今天朋友几个一起出去吃大餐，吃完后，我提出谁丑谁付账单，正巧一旁的服务员听到了，然后看了我们一眼，说：“你们还是AA制吧……”
麻烦大家动动小手甩一个收藏与关注。