jquery实现软件功能介绍tab标签切换效果代码
代码语言：html
所属分类：选项卡
代码描述：jquery实现软件功能介绍tab标签切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 12px;
color: #000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.gongneng_main {
height: 785px;
width: 1200px;
margin: 0 auto;
}
.Small_tedian_tit {
text-align: center;
font-size: 32px;
color: #333;
padding-top: 95px;
padding-bottom: 40px;
}
.gongneng_tab {
width: 520px;
height: 45px;
border-radius: 25px;
border: 1px solid #f3f3f3;
margin: 0 auto;
box-shadow: 0px -2px 2px #e8e6e6;
margin-bottom: 80px;
}
.gongneng_tabmin {
width: 392px;
margin: 0 auto;
overflow: hidden;
padding: 5px 0;
}
.gongneng_click {
cursor: pointer;
width: 35px;
height: 35px;
margin: 0 7px;
float: left;
text-align: center;
position: relative;
}
.gongneng_click b {
font-weight: 400;
position: relative;
z-index: 2;
color: #555;
line-height: 35px;
font-size: 20px;
transition: all .5s ease;
}
.gongneng_click i {
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 50%;
background-color: #00b0ff;
box-shadow: 0 3px 10px #b4e9ff;
border-radius: 50%;
z-index: 1;
transition: all .2s ease;
}
.gongneng_click.cur b {
color: #fff;
}
.gongneng_click.cur i {
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.gongneng_tabcon {
overflow: hidden;
display: none;
}
.gongneng_left1 {
width: 537px;
height: 354px;
float: left;
margin-left: 150px;
margin-right: 130px;
}
.gongneng_right1 {
overflow: hidden;
}
.gongneng_right1 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 35px;
padding-bottom: 20px;
}
.gongneng_right1 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 20px;
}
.gongneng_right1 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left2 {
width: 583px;
height: 358px;
overflow: hidden;
}
.gongneng_right2 {
float: left;
margin-left: 220px;
margin-right: 130px;
}
.gongneng_right2 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 35px;
padding-bottom: 20px;
}
.gongneng_right2 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 20px;
}
.gongneng_right2 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left3 {
width: 552px;
height: 364px;
float: left;
margin-left: 190px;
margin-right: 70px;
}
.gongneng_right3 {
overflow: hidden;
}
.gongneng_right3 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 55px;
padding-bottom: 20px;
}
.gongneng_right3 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 15px;
}
.gongneng_right3 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left4 {
width: 360px;
height: 347px;
float: right;
margin-right: 120px;
}
.gongneng_right4 {
float: left;
margin-left: 220px;
margin-right: 130px;
}
.gongneng_right4 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 35px;
padding-bottom: 20px;
}
.gongneng_right4 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 20px;
}
.gongneng_right4 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left5 {
width: 550px;
height: 362px;
float: left;
margin-left: 160px;
margin-right: 110px;
}
.gongneng_right5 {
overflow: hidden;
}
.gongneng_right5 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 55px;
padding-bottom: 20px;
}
.gongneng_right5 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 15px;
}
.gongneng_right5 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left6 {
width: 550px;
height: 342px;
float: right;
margin-right: 50px;
}
.gongneng_right6 {
float: left;
margin-left: 220px;
margin-right: 130px;
}
.gongneng_right6 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 35px;
padding-bottom: 20px;
}
.gongneng_right6 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 20px;
}
.gongneng_right6 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
.gongneng_left7 {
width: 305px;
height: 348px;
float: left;
margin-left: 230px;
}
.gongneng_right7 {
float: right;
margin-right: 280px;
}
.gongneng_right7 b {
font-size: 90px;
display: block;
color: #ededed;
margin-top: 35px;
padding-bottom: 20px;
}
.gongneng_right7 em {
font-size: 24px;
display: block;
color: #555;
padding-bottom: 20px;
}
.gongneng_right7 p {
font-size: 14px;
display: block;
color: #777;
padding-bottom: 5px;
}
/*动画*/
.fadeInRight {
animation: fadeInRight 1s
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px)
}
100% {
opacity: 1;
transform: translateX(0)
}}
.fadeInLeft {
animation: fadeInLeft 1s
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px)
}
100% {
opacity: 1;
transform: translateX(0)
}}
</style>
</head>
<body>
<div class="gongneng">
<div class="gongneng_main" id="gongneng_main">
<div class="Small_tedian_tit">
建站小程序功能特点
</div>
<div class="gongneng_tab">
<div class="gongneng_tabmin">
<div class="gongneng_click cur">
<i></i><b>1</b>
</div>
<div class=.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0