CSS3 Tab动画实例之背景切换动态效果

CSS3 Tab动画实例之背景切换动态效果是一种很有趣的动态效果，它能够制作出炫酷的、富有活力的页面效果。下面是制作这种效果的完整攻略：

准备工作

在开始制作前，我们需要做以下准备工作：

创建一个HTML页面
引入CSS样式文件

在HTML页面中，我们需要创建一个容纳所有Tab内容的div元素，例如：

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h3>Tab 1</h3>
      <p>This is the content for Tab 1.</p>
    </div>
    <div id="tab2" class="tab">
      <h3>Tab 2</h3>
      <p>This is the content for Tab 2.</p>
    </div>
    <div id="tab3" class="tab">
      <h3>Tab 3</h3>
      <p>This is the content for Tab 3.</p>
    </div>
    <div id="tab4" class="tab">
      <h3>Tab 4</h3>
      <p>This is the content for Tab 4.</p>
    </div>
  </div>
</div>

在这个结构中，每个Tab的内容分别被包含在一个div元素中，并且每个Tab的div元素都有一个唯一的ID。

制作动态效果

第一步：添加CSS样式

/* 隐藏所有的tab内容 */
.tab-content .tab{
  display:none;
}

/* 显示当前选中的tab */
.tab-content .active{
  display:block;
}

/* 给tab链接添加样式 */
.tab-links a{
  margin:0 1em;
  padding:0.5em;
  background:#eee;
  border-radius:5px;
  text-decoration:none;
  color:#000;
}

.tab-links a:hover{
  background:#333;
  color:#fff;
}

.tab-links .active a{
  background:#333;
  color:#fff;
}

/* 添加Tab背景切换动态效果 */
.tabs {
  background: #eee;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}

.tab-links a:hover {
  background: #333;
  color: #fff;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.tab-links .active a {
  background: #333;
  color: #fff;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  position: relative;
}

.tab-links .active a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #ff9f00;
  -webkit-animation: tab-hover-bar 1s ease-in-out;
  -moz-animation: tab-hover-bar 1s ease-in-out;
  -o-animation: tab-hover-bar 1s ease-in-out;
  animation: tab-hover-bar 1s ease-in-out;
}

@-webkit-keyframes tab-hover-bar {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

@-moz-keyframes tab-hover-bar {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

@-o-keyframes tab-hover-bar {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

@keyframes tab-hover-bar {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}

在这个CSS样式中，我们给每个tab内容div设置了display:none属性来隐藏所有的tab内容，同时给选中的tab内容div设置了display:block属性来显示当前选中的tab。

我们给每个tab链接添加了一些样式，如背景颜色、圆角、边框等等，同时添加了:hover样式，当鼠标移动到链接上时，tab链接的背景颜色会变化。

我们添加了一个背景切换动态效果，在tab链接被悬停时，我们用CSS动画制作了一个横向的动态进度条，它在选中的tab链接下面滑动并扩展到整个tab链接的宽度。

第二步：添加JavaScript代码

/* 给tab链接添加点击事件 */
jQuery(document).ready(function($) {
  $('.tab-links a').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tab-content ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
    $(this).parent('li').addClass('active').siblings().removeClass('active');
    e.preventDefault();
  });
});

我们添加了一个点击事件，当tab链接被点击时，我们使用slideUp和slideDown方法滑动显示和隐藏当前选中的tab内容，并使用addClass和removeClass方法来改变tab链接的样式。

示例

下面是两个动态效果的示例，分别是背景颜色和背景图片切换：

背景颜色切换

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Red</a></li>
    <li><a href="#tab2">Blue</a></li>
    <li><a href="#tab3">Green</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h3>Red</h3>
      <p>This is the content for Red.</p>
    </div>
    <div id="tab2" class="tab">
      <h3>Blue</h3>
      <p>This is the content for Blue.</p>
    </div>
    <div id="tab3" class="tab">
      <h3>Green</h3>
      <p>This is the content for Green.</p>
    </div>
  </div>
</div>

/* 使用背景颜色制作动态效果 */
.tabs {
  background: #ff0000;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}

.tab-links a:hover {
  background: #0000ff;
  color: #fff;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.tab-links .active a {
  background: #0000ff;
  color: #fff;
}

背景图片切换

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Image 1</a></li>
    <li><a href="#tab2">Image 2</a></li>
    <li><a href="#tab3">Image 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h3>Image 1</h3>
      <p>This is the content for Image 1.</p>
    </div>
    <div id="tab2" class="tab">
      <h3>Image 2</h3>
      <p>This is the content for Image 2.</p>
    </div>
    <div id="tab3" class="tab">
      <h3>Image 3</h3>
      <p>This is the content for Image 3.</p>
    </div>
  </div>
</div>

/* 使用背景图片制作动态效果 */
.tabs {
  background: url('image1.jpg');
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
}

.tab-links a:hover {
  background: url('image2.jpg');
  color: #fff;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
}

.tab-links .active a {
  background: url('image2.jpg');
  color: #fff;
}

在这个示例中，我们使用了两个不同的背景图片，来展示背景图片切换效果的动态效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS3 Tab动画实例之背景切换动态效果 - Python技术站