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日

相关文章

  • CSS标签切换代码实例教程 比较漂亮

    ChromeJS网站专栏上的“CSS标签切换代码实例教程 比较漂亮”是一篇介绍如何实现CSS标签切换效果的教程,该文主要从以下几个方面进行讲解: 1. 目录结构 首先,该文介绍了整个教程所需要的文件结构以及所用到的文件,其中主要包括index.html、index.css和index.js三个文件和一个img文件夹。 2. 实现思路 其次,该文详细介绍了如何…

    css 2023年6月9日
    00
  • CSS3 display知识详解

    CSS3 display知识详解 CSS3 中的 display 属性决定了元素的框类型,以及这些框如何相互关联。 常用值 以下是常用的 display 属性值:- block:将元素显示为块级元素,前后带有换行符;- inline:将元素显示为行内元素,前后没有换行符;- inline-block:元素呈现为内联元素,但可以设置宽度、高度等块级元素的属性;…

    css 2023年6月10日
    00
  • html+css实现登录界面附效果图

    实现一个登录界面需要使用HTML和CSS来布局和美化,下面我们来详细的讲解一下具体操作步骤。 步骤一:准备HTML代码 首先,我们需要编写HTML代码来构建登录界面。我们可以先写出基础的HTML骨架,比如下面这段代码: <!DOCTYPE html> <html lang="en"> <head> &l…

    css 2023年6月9日
    00
  • React 中使用 Redux 的 4 种写法小结

    React 中使用 Redux 的 4 种写法小结指的是在 React 中集成 Redux 的四种不同的方法。这四种方法分别是: 1.传统的用法(Traditional Way) 2.React-Redux 库的用法(Using React-Redux Library) 3.Redux Hooks 的用法(Using Redux Hooks) 4.Redux…

    css 2023年6月10日
    00
  • Bootstrap实现渐变顶部固定自适应导航栏

    这里是关于”Bootstrap实现渐变顶部固定自适应导航栏”的完整攻略: 步骤一:基本结构 首先,我们需要设置基本的html文档结构,并引入Bootstrap的css文件和js文件,以及jQuery库和Popper.js。 <!doctype html> <html lang="en"> <head> …

    css 2023年6月11日
    00
  • jQuery实现的自定义轮播图功能详解

    jQuery实现自定义轮播图功能详解 自定义轮播图是现代网站设计中经常出现的效果之一。通过jQuery实现轮播图功能,能够使我们更加灵活地控制其样式和交互效果。下面介绍一下实现自定义轮播图的具体步骤。 第一步:HTML结构 首先,我们需要在HTML结构中定义轮播图的内容。例如: <div class="slider"> &lt…

    css 2023年6月10日
    00
  • CSS实现鼠标移动到图片或按钮上改变大小的方法示例

    CSS实现鼠标移动到图片或按钮上改变大小的方法可以通过CSS属性transform实现。transform属性可以实现元素的缩放、旋转、平移和倾斜等效果,而对于本问题的实现,我们利用transform的scale功能来实现鼠标移动到图片或按钮上改变大小的需求。 具体实现方法如下: 利用:hover伪类和transform属性的scale功能实现 我们可以通过…

    css 2023年6月10日
    00
  • 微信小程序如何引用外部js,外部样式,公共页面模板

    微信小程序作为一种新型轻量级应用程序开发框架,拥有着使用方便、内置依赖库齐全、开发效率高等优点。但我们也会遇到需要引用外部js、css、公共页面模板等需求。下面将介绍在微信小程序中如何引用外部js、css以及公共页面模板。 引用外部js 在微信小程序中,我们可以通过<script>标签来引入外部js。如下是一个简单的示例: <view&gt…

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