jquery Tab切换,CSS3制作发光字
以下是使用jQuery和CSS3制作的Tab切换效果,同时每个激活的Tab项都会有一个发光的效果。
HTML部分:
<div class="tabs">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<ul>
<li title="Tab 1"><label for="tab1">Tab 1</label></li>
<li title="Tab 2"><label for="tab2">Tab 2</label></li>
<li title="Tab 3"><label for="tab3">Tab 3</label></li>
</ul>
<div class="content">
<section>
<h2>Tab 1</h2>
<p>Content for tab 1...</p>
</section>
<section>
<h2>Tab 2</h2>
<p>Content for tab 2...</p>
</section>
<section>
<h2>Tab 3</h2>
<p>Content for tab 3...</p>
</section>
</div>
</div>
CSS部分:
.tabs {
width: 100%;
display: inline-block;
}
.tabs input[type="radio"] {
display: none;
}
.tabs ul {
cursor: pointer;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
z-index: 1;
}
.tabs li {
float: left;
margin-bottom: -1px;
}
.tabs label {
display: block;
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
position: relative;
z-index: 2;
transition: background-color 0.3s;
}
.tabs label:hover {
background-color: #f0f0f0;
}
.content {
clear: both;
padding: 10px;
position: relative;
z-index: 1;
}
.content section {
display: none;
padding: 20px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 30px;
width: 100%;
}
[id^="tab"]:checked + label {
z-index: 3;
border-bottom: 1px solid #fff;
}
[id^="tab"]:checked ~ [id^="tab"] + label {
z-index: 2;
}
[id^="tab"]:checked ~ .content section {
display: block;
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de;
}
}
jQuery部分:
$(document).ready(function() {
$('input[ty
评论已关闭