【特效】css3制作动态裁剪导航条
在网上溜达的时候发现了这款漂亮的导航特效，先来一睹为快吧~
效果确实很惹眼。
于是，动手开始研究它~
迅速找到重点：clip-path
翻译过来就是 裁剪路径。
剪切是一个图形化操作，你可以部分或者完全隐藏一个元素。被剪切的元素可以是一个容器也可以是一个图像元素。元素的哪些部分显示或隐藏是由剪切的路径来决定的。
剪切路径定义了一个区域，在这个区域内的内容将会显示，而不在这个区域内的内容不会显示。这个区域被称之为“裁剪区域”。
先来研究案例，变化部分的css为：
header nav ul li { -webkit-clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); transition: all 0.5s;
} header nav ul li:hover { -webkit-clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0);
}
分析得出，这是标签 li 从一个裁剪路径变化到另一个裁剪路径的过程，关于代码里一大长串的百分数，就是用来“画”路径的。
下面用一个示意图来表示一下百分数的含义吧~
具体效果无非就是 路径 从 橘黄色变化到蓝色 的一个过程。
clip-path的其他应用 。
clip-path属性是指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path的属性上。你还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状你可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。
/* clip-path：polygon （）多边形 */ /* clip-path:circle(半圆 at 圆心X轴 圆心Y轴); 圆形*/ /* -webkit-clip-path: ellipse(X轴半径 Y轴半径 at 50% 50%); 椭圆*/
下面贴出整体html文档，更多形状你可以自由发挥~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> body { background-image: url(1.jpg); font-weight: 300; } header { margin: 0 auto; height: 300px; position: relative; overflow-x: hidden; } header nav { position: absolute; bottom: calc(50% - 54px); width: 100%; } header nav ul { padding: 0; margin: 0; font-size: 0; width: 600px; margin: 0 auto; position: relative; } header nav ul li { display: inline-block; width: 20.25%; margin: 0 -1px; text-align: center; background: rgba(0, 0, 0, 0.7); font-size: 21px; -webkit-clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); transition: all 0.5s; } header nav ul li:hover { -webkit-clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0); } header nav a { padding: 26px 0; width: 100%; display: block; text-decoration: none; color: #fff; } </style> <body> <header> <nav> <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Home </a> </li> </ul> </nav> </header> </body> </html>
注：目前最好支持Chrome