您的位置：首页 > Web前端 > CSS

转载-css 属性clip-path之多边形polygon小窥

2018-06-30 11:59 357 查看

原文http://www.cnblogs.com/leegao/p/4384499.html

css 属性clip-path之多边形polygon小窥

起因：

源于上个月中旬微博上很多前端大神在转发国外牛人用clip-path开发的一个动画效果，点击这里膜拜，然后陆陆续续看到很多篇分析文章，接着我也屁颠屁颠的跟着看了下，大概了解下其中的原理，现在写出来权当自己的笔记吧

实例：

废话不多说，上代码

　　下面是css代码

　　效果如下

属性的用法

polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>)

定义了每一个点的坐标，从上图也能看出，起点是从左上角开始计算的，可以用百分百，也可以用px等单位。

关键位置分析

我这里设置的第一个点位置为x:100px,y:200px，第二个点的位置为x:100px,y:300px，第三个点的位置为x:200px,y:300px，最后一个点位置为x:200px,y:200px，最后自动闭合成一个长宽高都为100px的正方形。

看吧，其实这么看来，也没有很复杂，那么现在浏览器支持的情况是什么样的呢，看下图（但是我发现纯css shape FF是不支持的。）

最后送上一个小福利

polygon如果节点数量一样多，百分百可用transition变形动画，之前css3里的变形一般只是内部拉伸、旋转等固定的模式，现在有了polygon，又多了无限可能，正如起因里的例子

继续上code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clip-path实践</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<!-- title -->
<h1>css3 clip-path</h1>
<div class="test">
</div>
</div>
</body>
</html>

以下css来自张鑫旭（极力推荐关注）

body {
color: grey; }

.wrap {
max-width: 800px;
margin: 0 auto;
padding: 20px; }

h1 {
text-align: center; }

.test {
background-color: grey;
max-width: 600px;
height: 400px;
margin: 0 auto;
padding: 0;
-webkit-animation: auto-transition 3s infinite alternate;
animation: auto-transition 3s infinite alternate; }
@-webkit-keyframes auto-transition {
0% {
-webkit-clip-path: polygon(50px 100px, 160px 30px, 160px 170px);
clip-path: polygon(50px 100px, 160px 30px, 160px 170px); }
50% {
-webkit-clip-path: polygon(50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160px 110px, 160px 170px);
clip-path: polygon(50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160px 110px, 160px 170px); }
100% {
-webkit-clip-path: polygon(50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px);
clip-path: polygon(50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px); } }
@keyframes auto-transition {
0% {
-webkit-clip-path: polygon(50px 100px, 160px 30px, 160px 170px);
clip-path: polygon(50px 100px, 160px 30px, 160px 170px); }
50% {
-webkit-clip-path: polygon(50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160px 110px, 160px 170px);
clip-path: polygon(50px 100px, 160px 30px, 160px 90px, 360px 90px, 360px 30px, 470px 100px, 360px 170px, 360px 110px, 160px 110px, 160px 170px); }
100% {
-webkit-clip-path: polygon(50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px);
clip-path: polygon(50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px); } }

效果如下：

提示：

polygon

的动画变形前后坐标点数量要一样，否则就会出现上面由第一个三角形变形为两个三角形的无过度效果。

参考资料：

http://www.zhangxinxu.com/wordpress/2015/03/css3-clip-path-polygon-shape-transition-animation/
https://css-tricks.com/almanac/properties/c/clip/
http://bennettfeely.com/clippy/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航