说起动画制作我们会想起flash，如今flash没落，还有什么办法实现下面的图片的动画效果呢，我们试试用css实现这个多个三角形合并正方形的动画效果。
<html><head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>css实现多个三角形合并正方形动画效果www.woaidaogu.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.triangle2rect {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-animation: aniContainer 2s infinite alternate;
animation: aniContainer 2s infinite alternate;
}
.triangle2rect div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.a {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
-webkit-animation: a 2s infinite alternate;
animation: a 2s infinite alternate;
}
.b {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
-webkit-animation: b 2s infinite alternate;
animation: b 2s infinite alternate;
}
.c {
background: deeppink;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
-webkit-animation: c 2s infinite alternate;
animation: c 2s infinite alternate;
}
.d {
background: deeppink;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
-webkit-animation: d 2s infinite alternate;
animation: d 2s infinite alternate;
}
@-webkit-keyframes a {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
}
}
@keyframes a {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
}
}
@-webkit-keyframes b {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
}
}
@keyframes b {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
}
}
@-webkit-keyframes c {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
}
}
@keyframes c {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
}
}
@-webkit-keyframes d {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
}
}
@keyframes d {
0%, 10% {
background: deeppink;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
}
90%, 100% {
background: #000;
-webkit-clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
}
}
@-webkit-keyframes aniContainer {
0%, 10% {
width: 100px;
height: 100px;
}
90%, 100% {
width: 250px;
height: 60px;
}
}
@keyframes aniContainer {
0%, 10% {
width: 100px;
height: 100px;
}
90%, 100% {
width: 250px;
height: 60px;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<hgroup>
<div></div>
<div></div>
<div></div>
<div></div>
</hgroup>
</body></html>通过以上内容我们知道了css如何实现多个三角形合并正方形的动画效果？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
