skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第190个小实例：3D翻转Tab选项卡切换特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-10-19 15:36:10 +08:00
parent 45f2f89e87
commit afc095412d
3 changed files with 135 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -197,6 +197,7 @@
187. HTML5+CSS3+Vue小实例：浪漫的心形文字动画特效
188. HTML5+CSS3+Vue小实例：饮料瓶造型文字旋转特效
189. HTML5+CSS3+JS小实例：焦点图波浪切换动画特效
190. HTML5+CSS3小实例：3D翻转Tab选项卡切换特效
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

95
code/190/190.css Normal file
View File

@ -0,0 +1,95 @@
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to top,#29323c,#485563);
}
.container{
width: 500px;
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-45%,-50%);
color: #fff;
font-weight: 300;
/* 大写 */
text-transform: uppercase;
/* 设置视距 */
perspective: 1300px;
}
input{
display: none;
}
.labels{
height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tab{
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
}
.tab:nth-child(1){
background-color: #00b4db;
}
.tab:nth-child(2){
background-color: #009bc5;
}
.tab:nth-child(3){
background-color: #007ba4;
}
.cube{
position: relative;
flex: 1;
/* 开启3D */
transform-style: preserve-3d;
/* 设置过渡效果 */
transition: transform 0.5s ease-in;
}
.tab-content{
width: 95%;
height: 230px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: red;
}
.tab-content h1{
font-size: 28px;
font-weight: 300;
}
.tab-content p{
font-size: 14px;
font-weight: 100;
}
.tab-content:nth-child(1){
background-color: #00b4db;
transform: rotateX(-270deg) translateY(-115px);
transform-origin: top center;
}
.tab-content:nth-child(2){
background-color: #009bc5;
transform: translateZ(115px);
}
.tab-content:nth-child(3){
background-color: #007ba4;
transform: rotateX(-90deg) translateY(115px);
transform-origin: bottom center;
}
#tab_top:checked ~ .cube{
transform: rotateX(-90deg);
}
#tab_middle:checked ~ .cube{
transform: rotateX(0deg) translateY(10px);
}
#tab_bottom:checked ~ .cube{
transform: rotateX(90deg);
}

39
code/190/190.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3D翻转Tab选项卡切换特效</title>
<link rel="stylesheet" href="190.css">
</head>
<body>
<div class="container">
<input type="radio" name="tabs" id="tab_top" checked>
<input type="radio" name="tabs" id="tab_middle">
<input type="radio" name="tabs" id="tab_bottom">
<div class="cube">
<div class="tab-content">
<h1>top content</h1>
<p>this is top content</p>
</div>
<div class="tab-content">
<h1>middle content</h1>
<p>this is middle content</p>
</div>
<div class="tab-content">
<h1>bottom content</h1>
<p>this is bottom content</p>
</div>
</div>
<div class="labels">
<label for="tab_top" class="tab">top</label>
<label for="tab_middle" class="tab">middle</label>
<label for="tab_bottom" class="tab">bottom</label>
</div>
</div>
</body>
</html>