css3 clip-path

最新推荐文章于 2024-08-19 17:55:37 发布

银贝斯

最新推荐文章于 2024-08-19 17:55:37 发布

阅读量418

点赞数 1

文章标签： css3 clip-path clip-path

本文链接：https://blog.csdn.net/yhn1121/article/details/52149396

版权

杂物间专栏收录该内容

19 篇文章 0 订阅

订阅专栏

section{
	position:absolute;
	width:800px;
	height:400px;
	border:1px solid grey;
}
.x{
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:#f4a034;
	-webkit-transition: all .3s;
	 transition: all .3s;
}
section:hover .x{
	-webkit-animation: x 10s ease-in infinite alternate;
			animation: x 10s ease-in infinite alternate;
}

@-webkit-keyframes x {	
  0%, 10% {
    -webkit-clip-path: polygon(49% 99%,51% 99%,51% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%,49% 100%);
          
  }
  10%, 15% {
    -webkit-clip-path: polygon(60% 60%,70% 60%,75% 45%,50% 40%,60% 80%,69% 79%,68% 48%,56% 56%,67% 87%,45% 67%);    
  }
  15%, 25% {
    -webkit-clip-path: polygon(60% 60%,70% 60%,75% 45%,35% 40%,60% 80%,69% 79%,47% 48%,56% 56%,67% 87%,60% 67%);    
  }
  25%, 35% {
    -webkit-clip-path: polygon(60% 30%,70% 60%,45% 45%,35% 60%,60% 80%,69% 39%,47% 48%,56% 56%,67% 87%,60% 67%);    
  }
  35%, 45% {
    -webkit-clip-path: polygon(70% 30%,100% 60%,45% 45%,35% 60%,60% 40%,69% 39%,47% 48%,56% 56%,67% 87%,60% 67%);    
  }
  45%, 60% {
    -webkit-clip-path: polygon(75% 25%,100% 45%,75% 40%,79% 45%,70% 40%,75% 39%,47% 40%,35% 45%,37% 30%,47% 40%);    
  }
  60%, 80% {
    -webkit-clip-path: polygon(80% 23%,100% 40%,80% 35%,83% 40%,90% 40%,75% 39%,44% 35%,33% 43%,33% 26%,44% 37%);    
  }
  80%, 100% {
    -webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 90% 35%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
          
  }
}