css 屬性clip-path之多邊形polygon小窺

時間 2019-11-18

標籤 css 屬性 clip path 之多邊形 polygon 欄目 CSS 简体版

原文原文鏈接

原由：css

源於上個月中旬微博上不少前端大神在轉發國外牛人用clip-path開發的一個動畫效果，點擊這裏膜拜，而後陸陸續續看到不少篇分析文章，接着我也屁顛屁顛的跟着看了下，大概瞭解下其中的原理，如今寫出來權當本身的筆記吧html

實例：前端

廢話很少說，上代碼css3

<!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代碼web

$color:grey;
$box-size:10px;
@mixin margin_space($a,$b) {
	margin:$a auto;
	padding:$b;
}
@mixin tx_center{
	text-align:center;
}
.wrap{
	max-width:$box-size*80;
	@include margin_space(0,20px);
}
h1{
	@include tx_center;
}
.test{
	background-color:$color;
	background: url(../images/background.jpg) no-repeat;
	background-size:cover;
	max-width:$box-size*60;
	height:$box-size*40;
	@include margin_space(0,0);
	// 只看 polygon屬性
	-webkit-clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);
        clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);
}

　　效果以下瀏覽器

屬性的用法wordpress

polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) 定義了每個點的座標，從上圖也能看出，起點是從左上角開始計算的，能夠用百分百，也能夠用px等單位。動畫

關鍵位置分析url

-webkit-clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);

我這裏設置的第一個點位置爲x:100px,y:200px，第二個點的位置爲x:100px,y:300px，第三個點的位置爲x:200px,y:300px，最後一個點位置爲x:200px,y:200px，最後自動閉合成一個長寬高都爲100px的正方形。spa

看吧，其實這麼看來，也沒有很複雜，那麼如今瀏覽器支持的狀況是什麼樣的呢，看下圖（可是我發現純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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。