前端各种交互效果——Tab栏效果

效果1

效果展示

源码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab</title><style>ul {display: flex;position: absolute;width: 100%;top: 20px;left: 50%;transform: translate(-50%, -50%);}li {list-style: none;position: relative;padding: 20px;font-size: 20px;color: #222;line-height: 1;transition: all 0.2S linear;cursor: pointer;}li::before {content: '';position: absolute;top: 0;left: 100%;width: 0;height: 100%;border-bottom: 2px solid #222;transition: all 0.2S linear;}li:hover::before {width: 100%;top: 0;left: 0;transition: 0.2S;border-bottom: 2px solid #222;z-index: -1;}li:hover~li::before {left: 0;}li:active {background: #222;color: #fff;}</style>
</head><body><ul><li>首页</li><li>分类</li><li>样式</li><li>效果</li><li>游戏</li></ul></body></html>

不定时更新补充

前端各种交互效果——Tab栏效果

效果1

效果展示

源码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab</title><style>ul {display: flex;position: absolute;width: 100%;top: 20px;left: 50%;transform: translate(-50%, -50%);}li {list-style: none;position: relative;padding: 20px;font-size: 20px;color: #222;line-height: 1;transition: all 0.2S linear;cursor: pointer;}li::before {content: '';position: absolute;top: 0;left: 100%;width: 0;height: 100%;border-bottom: 2px solid #222;transition: all 0.2S linear;}li:hover::before {width: 100%;top: 0;left: 0;transition: 0.2S;border-bottom: 2px solid #222;z-index: -1;}li:hover~li::before {left: 0;}li:active {background: #222;color: #fff;}</style>
</head><body><ul><li>首页</li><li>分类</li><li>样式</li><li>效果</li><li>游戏</li></ul></body></html>

不定时更新补充