css仿el-tabs标签页效果

简介: 【8月更文挑战第9天】

1.效果

2.主要代码详解
主要代码如下:active是下划线,activeitem是选中后改变字体颜色, 'item-' + (index + 1),用item来区分获取当前文字对应的距离和宽度好计算下划线的位置



{ { item.label || "" }}



选中后设置的样式,active是一个块级元素
.active {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #409eff;
  border-radius: 50px;
  transition: left 0.3s ease;
}
.activeitem {
  color: #409eff;
}

3.完整代码




项目







{ { item.label || "" }}






相关文章
|
7月前
elementUI el-tabs 实现动态选项卡页面效果
elementUI el-tabs 实现动态选项卡页面效果
|
前端开发
css实现平行四边形按钮
css实现平行四边形按钮
82 0
|
前端开发
CSS3 按钮
CSS3 按钮
46 0
|
容器
16EasyUI - 创建标签页(Tabs)
16EasyUI - 创建标签页(Tabs)
46 0
18EasyUI 布局- 添加自动播放标签页(Tabs)
18EasyUI 布局- 添加自动播放标签页(Tabs)
40 0
|
前端开发
css实现立体感按钮
css实现立体感按钮
213 0
css实现立体感按钮
|
前端开发 程序员
css制作的tip提示框
css制作的tip提示框
299 0
|
移动开发 前端开发 HTML5
css点击换色
css点击换色
70 0
|
测试技术
Easyui 去除jquery-easui tab页div自带滚动条
Easyui 去除jquery-easui tab页div自带滚动条
107 0

相关课程

更多