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


Posted in HTML / CSS onSeptember 15, 2017

设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。

最终实现效果如下:

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

为了 gif 动画能够展示细节,我将动画时间延长到了 3 秒

代码分享地址:http://runjs.cn/detail/h2dqt3td

实现思路

间隔竖线,因为不是顶天立地的,所以不能用边框。我准备用伪元素实现。

只有 3 个竖线,但是有 4 个 li ,这个简单,可以用 :not(:first-child) 选择器来选择。

切换的背景颜色变化,因为想要有从小到大的效果,因此,也不能直接使用背景颜色实现,我也准备用伪元素实现。

如果用伪元素的大小来控制,计算会比较复杂,因此,我想用 box-shadow 阴影来实现。

好,大体就是如此了,下面开始写代码,如下:

HTML 代码

<div class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </div>

上面的代码结构是之前已经写好的,我看可以,就不做任何调整了。没有什么累赘的代码。

CSS 代码

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

代码分析:

动画实现非常简单,只要使用 transition 属性即可。

控制自己的伪元素和下一个同级元素的伪元素,只需要使用 + 选择器即可。

其他代码都比较清晰简单,自己分析即可。

实现这个效果还是非常简单的,重点是平时的积累,以及各种参数的灵活搭配。想到实现方法,最终写代码是很快的事情。而且没有什么知识高点在里面。

CSS 之所以难,不是你不会,而是不不会去搭配。
 

其实,还是只还原了99%的设计效果,两条线一个在背景里面,一个在背景外面,想要把两条分割线都放到背景里面来,应该如何实现呢?可以思考一下。

安利一下 scss 。上面的 css 是编译出来的。其实用 scss 实现非常方便快捷,代码可读性也更高。

演示如下:

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

当然,这段代码中我用了颜色变量以及 mixin 混入代码。你不能直接使用。

总结

以上所述是小编给大家介绍的HTML5+CSS3 实现灵动的动画 TAB 切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 #HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 #HTML / CSS
用css3写出气球样式的示例代码
Sep 11 #HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 #HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
医院办公室主任职责
2013/12/29 职场文书
知识竞赛主持词
2014/03/26 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2014年科普工作总结
2014/12/06 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
python 实现的截屏工具
2021/05/08 Python
Go语言编译原理之源码调试
2022/08/05 Golang