css3-clip-path-imitate

最新推荐文章于 2023-09-11 10:09:47 发布

银贝斯

最新推荐文章于 2023-09-11 10:09:47 发布

阅读量443

点赞数 1

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

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

版权

杂物间专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body,html{
				margin:0px;
				padding:0px;
			}
			section{
				position: absolute;
				width:600px;
				height:600px;
				background:red;
				transition: all 1s;
				transform: rotate(0deg);
			}
			section:hover .fig{
				transition: all 1s;
				
				/*transform:scale(2.4);*/
				transform:translate(50%);
				
			}
			.fig{
				background: #090909;
				position: absolute;
			  	top: 0;
			  	right: 0;
			  	bottom: 0;
			  	left: 0;
			  	transition: all 1s;
				transform: rotate(0deg);
			  	/*-webkit-transition: all .3s;
 				 transition: all .3s;*/
			}
			.fig {
				  -webkit-animation: fish 0.5s linear infinite alternate;
				          animation: fish 0.5s linear infinite alternate;/*alternate会将css倒叙执行*/
				  }
			@-webkit-keyframes fish {	
  0%, 30% {
    -webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
  30%, 60%{
  	-webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 45%, 25% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 45%, 25% 20%, 40% 30%);
  }
  60%, 90%{
  	-webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
  90%, 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%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 90% 35%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
}	
			@keyframes fish {
  0%, 30% {
    -webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
  30%, 60%{
  	-webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 45%, 25% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 45%, 25% 20%, 40% 30%);
  }
  60%, 90%{
  	-webkit-clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 82% 40%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
  90%, 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%);
            clip-path: polygon(80% 20%, 100% 30%, 90% 35%, 83% 35%, 90% 35%, 80% 40%, 40% 30%, 30% 40%, 30% 20%, 40% 30%);
  }
}  
		</style>
	</head>
	<body>
		<section>
			<div class="fig"></div>
		</section>
	</body>
</html>

下面是代码链接