平行四边形、梯形导航条

平行四边形

效果如图：

hover 的效果如图：

代码如下：

<div class="keith"><ul><li>导航条</li><li>首页</li><li>呼呼呼</li><li>嘻嘻嘻</li><li>设置</li><li>个人中心</li></ul>
</div>

.keith li {position: relative;float:left;margin-left:2px;color:#fff;text-decoration: none;list-style:none;padding:5px 10px;
}
.keith li::after {content: '';position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: -1;background: #069e06;-moz-transform: skewX(-25deg);-ms-transform: skewX(-25deg);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);
}
.keith li:hover::after {background: #0ee80e;
}

梯形

用于控制梯形是左倾斜还是右倾斜的属性是transform-origin。梯形不倾斜：bottom。左倾斜：bottom left；右倾斜：bottom right。

效果如图：

hover:效果：

代码如下：

<div class="keith"><ul><li >导航条</li><li >首页</li><li>呼呼呼</li><li >嘻嘻嘻</li><li >设置</li><li >个人中心</li></ul>
</div>

.keith li {position: relative;float:left;margin-left:-10px;color:#fff;text-decoration: none;list-style:none;padding:10px 15px 5px 15px;}
.keith li::after {content: '';border:2px solid #fff;position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;background: #069e06;-moz-transform: perspective(0.5em) rotateX(5deg);-ms-transform: perspective(0.5em) rotateX(5deg);-webkit-transform: perspective(0.5em) rotateX(5deg);transform: perspective(0.5em) rotateX(5deg);-moz-transform-origin: bottom;-webkit-transform-origin: bottom;transform-origin: bottom ;
}
.keith li:hover::after {background: #0ee80e;
}

平行四边形、梯形导航条相关推荐

CSS 技巧记录 - 平行四边形导航条、梯形导航条、毛玻璃效果
一.平行四边导航条效果图: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
导航条——收缩式导航菜单
1.概述在网站中不仅可以设置导航条,而且还可以设置导航菜单.由于菜单内容比较多,同一页面显示比较杂乱,所以很多的设计者都采用了收缩式的菜单形式. 2.技术要点本实例主要是应用JavaScript控 ...
android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...
介绍开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
Angular1.x入门级自定义组件（导航条）
<!DOCTYPE html> <html lang="zh" ng-app="app"> <head><meta c ...
翻页导航条页码计算方法
在开发搜索引擎等应用时,提供一个翻页导航条是必须的.我看过网上一些相关的代码,搞得很复杂.晕~~~ 其实其数学计算公式非常简单,本文提供两种最常用的算法. 翻页式样式如下.每次显示10个页码,并提供 ...
如何构建顶部导航条_如何构建导航栏
如何构建顶部导航条导航栏 (Navigation Bars) Navigation bars are a very important element to any website. They pr ...

平行四边形、梯形导航条

平行四边形、梯形导航条相关推荐

最新文章

热门文章