站长资源
Tap选项卡是大家最常用的功能之一，因为兼容性的问题目前大多朋友也都是用js书写，当然我也会用JS去书写，必定web端的应用你的用户群体是不不同的，兼容性自然是很重要的。
不过今天我们介绍的是用纯css的方式来写一个选项卡的功能，这里用到的css3的主要属性及伪类有
transform transform: rotate transform: translate transform-origin transform-style transition :nth-child :checked
以上属性及伪类选择器均不支持IE8及以下浏览器，大家酌情使用
其中:checked是主要功臣
定义
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
兼容性
我们贴出具体实现的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯Css3选项卡的实现</title>
<style>
body {
background: #666666;
}
.perspective {
perspective: 76em;
perspective-origin: 50% 50px;
width: 494px;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
text-align: center;
}
input {
display: none;
}
.tab {
position: absolute;
width: 80px;
height: 70px;
background: pink;
right: 0;
line-height: 70px;
font-weight: 300;
}
.tab:nth-child(1) {
top: -5px;
background: #33CCFF;
}
.tab:nth-child(2) {
top: 69px;
background: #1B9AAA;
}
.tab:nth-child(3) {
top: 143px;
background: #669999;
}
.cube {
position: relative;
margin: 60px auto 0;
width: 300px;
height: 200px;
transform-origin: 0 100px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in;
}
.tab-content {
width: 300px;
height: 200px;
position: absolute;
}
.tab-content h1 {
font-size: 25px;
margin: 75px 0 10px;
font-weight: 300;
}
.tab-content p {
font-size: 12px;
}
.tab-content:nth-child(2) {
transform: translateZ(100px);
background: #1B9AAA;
}
.tab-content:nth-child(1) {
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top left;
background: #33CCFF;
}
.tab-content:nth-child(3) {
transform: rotateX(-90deg) translateY(100px);
transform-origin: bottom center;
background: #669999;
}
#tab-one:checked ~ .cube {
transform: rotateX(-90deg);
}
#tab-two:checked ~ .cube {
transform: rotateX(0deg);
}
#tab-three:checked ~ .cube {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="perspective">
<label class="tab" for="tab-one">选项卡一</label>
<label class="tab" for="tab-two">选项卡二</label>
<label class="tab" for="tab-three">选项卡三</label>
<input type="radio" name="tabs" id="tab-one">
<input type="radio" name="tabs" id="tab-two">
<input type="radio" name="tabs" id="tab-three">
<div class="cube">
<div class="tab-content">
<h1>第一个选项卡内容</h1>
<p>www.wangdahai.cn</p>
</div>
<div class="tab-content">
<h1>第二个选项卡内容</h1>
<p>www.wangdahai.cn</p>
</div>
<div class="tab-content">
<h1>第三个选项卡内容</h1>
<p>www.wangdahai.cn</p>
</div>
</div>
</div>
</body>
</html>
附上tranform和transition的语法及参数用法
语法
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4×4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
本文由站长资源www.wangdahai.cn原创首发，转载请注明出处
评论前必须登录！
注册