HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

下面我将详细讲解 HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 的完整攻略。

1. 理解需求和设计思路

首先要明确需求,该动画效果是实现一个具有切换效果的 TAB 栏,可以通过点击 TAB 来切换不同的内容。

设计思路:

  • 使用 HTML 的 ul 和 li 标签来构建基本的 TAB 栏结构
  • 使用 CSS3 实现动画效果
  • 使用 JavaScript 实现点击 TAB 可以切换不同内容的功能

2. 绘制基本结构

在 HTML 文件中添加 ul 和 li 标签,并编写基本的 CSS 样式,设置每个 TAB 的样式。

<ul>
  <li class="tab active">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
</ul>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px 5px 0 0;
  margin-right: 10px;
}

.active {
  background-color: #fff;
  border-bottom: none;
}

此时页面上已经可以看到 TAB 栏的基本结构。

3. CSS3 实现动画效果

使用 CSS3 的 transform 属性,配合 transition 属性实现动画效果。这里的思路是使用 transform 的 translateX 属性来移动当前活动的 TAB,达到切换效果。

首先,在 CSS 中添加以下代码:

.tab.active ~ .slide {
  transform: translateX(calc((100% + 10px) * var(--index)));
}

这里使用了 CSS3 变量。在 ul 标签上添加 --index 变量来表示当前活动的 TAB 的下标。

接下来,添加一个 div,用于实现滑动效果。

<div class="slide"></div>

设置样式:

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 3);
  background-color: #4285f4;
  transition: transform 0.3s ease-in-out;
}

这里的宽度使用 calc 函数计算得出,因为本例中有三个 TAB。

此时,如果打开页面,已经可以看到一个滑动的效果了。

4. JavaScript 实现点击 TAB 切换内容

最后一步是通过 JavaScript 实现点击 TAB 切换不同内容的功能。

添加以下代码:

var tabs = document.querySelectorAll('.tab');
var slide = document.querySelector('.slide');
var index = 0;

tabs.forEach(function(tab, k) {
  tab.addEventListener('click', function() {
    index = k;
    slide.style.setProperty('--index', index);
    document.querySelector('.tab.active').classList.remove('active');
    tab.classList.add('active');
  });
});

这里的代码比较简单,先获取所有的 TAB 元素和滑动的元素,再循环遍历每个 TAB,为其添加点击事件。在点击事件中,改变变量 --index 的值,并切换 TAB 的类名。

至此,一个完整的 HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) 就完成了。

示例说明1

如果需要将 TAB 的数量变更为 4,需要改变的地方只有 CSS。

首先,在 ul 标签中添加一个 li 标签:

<ul>
  <li class="tab active">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
  <li class="tab">Tab 4</li>
</ul>

然后修改 .slide 标签的宽度:

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 4);
  background-color: #4285f4;
  transition: transform 0.3s ease-in-out;
}

示例说明2

如果需要更改滑动效果的颜色,只需要简单修改样式即可。

.slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: calc(100% / 3);
  background-color: #FF0000; /* 修改此处 */
  transition: transform 0.3s ease-in-out;
}

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO) - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • 在JavaScript中获取请求的URL参数[正则]

    获取请求的URL参数在Web开发中非常常见。JavaScript提供了多种方式来获取URL参数,其中使用正则表达式进行匹配是一种非常常用的方式,下面是完整的攻略。 1.使用正则表达式进行URL参数提取 以下正则表达式用于匹配URL参数: let reg = new RegExp("(^|&)" + name + "=([…

    css 2023年6月9日
    00
  • jQuery实现适用于移动端的跑马灯抽奖特效示例

    下面是详细的jQuery实现适用于移动端的跑马灯抽奖特效的攻略: 1. 准备工作 在实现跑马灯抽奖特效之前,我们需要先准备一些基本的素材,包括CSS样式表和HTML结构。在CSS样式表中,我们一般需要定义一些基本的样式,例如设置背景颜色、边框样式等等。在HTML结构中,我们需要定义一个容器元素和一个跑马灯元素。 示例代码: <!DOCTYPE html…

    css 2023年6月9日
    00
  • 网页布局教程 掌握CSS网页布局属性

    网页布局教程 掌握CSS网页布局属性 概述 在网页设计中,布局是一个至关重要的环节。CSS作为一种样式语言,可以用来控制网页布局。本篇攻略将详细介绍CSS常用的布局属性,帮助您更好地掌握网页布局。 盒模型 在CSS中,页面中的元素可以看做矩形盒子,每个矩形盒子都由四部分组成,分别是:内容(content)、填充(padding)、边框(border)、外边距…

    css 2023年6月10日
    00
  • 让ie浏览器支持RGBA颜色标准实现代码

    要让IE浏览器支持RGBA颜色标准实现代码,可以使用IE的滤镜(filter)属性。下面是详细步骤: 步骤1:在CSS中设置RGBA颜色值 首先,你需要在CSS中设置一个RGBA颜色值,例如:rgba(255, 0, 0, 0.5)。 例如,我们可以设置一个半透明的红色背景: background-color: rgba(255, 0, 0, 0.5); 步…

    css 2023年6月9日
    00
  • CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

    对于“CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产”的完整攻略,建议分为以下几个部分来讲解: 色调旋转滤镜的基本知识 通过CSS实现色调旋转滤镜效果 批量生产按钮的方法 下面我会详细讲解每个部分。 1. 色调旋转滤镜的基本知识 色调旋转滤镜是CSS filter滤镜中的一个函数,语法格式如下: filter: hue-rotate(…

    css 2023年6月10日
    00
  • 解析CSS中的Grid布局完全指南

    解析CSS中的Grid布局完全指南攻略 简介 Grid布局是CSS3新引入的一种用于网页布局的方式,它可以精确的控制网页元素的位置和大小,让页面布局更为灵活和可控。本文将详细讲解Grid布局的使用方法和注意事项。 基本用法 首先,我们需要将一个容器标记为Grid布局,我们可以通过在容器上设置display: grid来实现: .container { dis…

    css 2023年6月13日
    00
  • IE8下jQuery改变png图片透明度时出现的黑边

    问题描述: 在IE8浏览器中,使用jQuery的animate()方法改变PNG图片的透明度时,图片周围会出现黑色边框,影响美观。 解决方案: 1.使用CSS样式解决 通过在CSS文件中设置-ms-filter样式,来控制图片的透明度,避免出现黑色边框。例如: img { filter: alpha(opacity=50); /*兼容IE8*/ -ms-fi…

    css 2023年6月10日
    00
  • css圆角样式制件代码示例(css设置圆角)

    CSS圆角样式制件代码示例 CSS可以通过设置圆角实现元素圆角化的样式效果。本文将介绍CSS圆角样式制件的代码示例。 border-radius属性 CSS中的border-radius属性可以设置生成一个元素的圆角。其语法如下: border-radius: 10px 20px 30px 40px; border-radius属性可接受一个到四个值。如果只…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部