CSS3制作互动三角形
Posted 代码君肿了么
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3制作互动三角形相关的知识，希望对你有一定的参考价值。
点击文末‘阅读原文’，预览效果！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三角形加载</title>
<style>
center{ width:200px; height:200px; position:absolute; margin:auto; top: 0;bottom: 0;left: 0;right: 0;}
.one{width:0;
height:0;
border-left:45px solid transparent;
border-right:45px solid transparent;
border-top:78px solid #2e9fda; position:absolute; top:18px; left:55px;
-webkit-animation: a1 ease-in-out infinite 2.7s;
-moz-animation: a1 ease-in-out infinite 2.7s;
-ms-animation: a1 ease-in-out infinite 2.7s;
-o-animation: a1 ease-in-out infinite 2.7s;
animation: a1 ease-in-out infinite 2.7s;}
@keyframes a1{
0%{top:18px; left:55px;}
33.3%{top:107px; left:4px;}
66.6%{top:107px; left:107px;}
100%{top:18px; left:55px;}
}
@-webkit-keyframes a1{
0%{top:18px; left:55px;}
33.3%{top:107px; left:4px;}
66.6%{top:107px; left:107px;}
100%{top:18px; left:55px;}
}
@-moz-keyframes a1{
0%{top:18px; left:55px;}
33.3%{top:107px; left:4px;}
66.6%{top:107px; left:107px;}
100%{top:18px; left:55px;}
}
@-ms-keyframes a1{
0%{top:18px; left:55px;}
33.3%{top:107px; left:4px;}
66.6%{top:107px; left:107px;}
100%{top:18px; left:55px;}
}
@-o-keyframes a1{
0%{top:18px; left:55px;}
33.3%{top:107px; left:4px;}
66.6%{top:107px; left:107px;}
100%{top:18px; left:55px;}
}
.two{width:0;
height:0;
border-left:45px solid transparent;
border-right:45px solid transparent;
border-bottom:78px solid #24b3a3;position:absolute; bottom:18px; left:55px;
-webkit-animation: a12 ease-in-out infinite 2.7s;
-moz-animation: a12 ease-in-out infinite 2.7s;
-ms-animation: a12 ease-in-out infinite 2.7s;
-o-animation: a12 ease-in-out infinite 2.7s;
animation: a12 ease-in-out infinite 2.7s;}
@keyframes a12{
0%{bottom:18px; left:55px}
33.3%{bottom:100px; left:107px;}
66.6%{bottom:100px; left:4px;}
100%{bottom:18px; left:55px}
}
@-webkit-keyframes a12{
0%{bottom:18px; left:55px}
33.3%{bottom:100px; left:107px;}
66.6%{bottom:100px; left:4px;}
100%{bottom:18px; left:55px}
}
@-moz-keyframes a12{
0%{bottom:18px; left:55px}
33.3%{bottom:100px; left:107px;}
66.6%{bottom:100px; left:4px;}
100%{bottom:18px; left:55px}
}
@-ms-keyframes a12{
0%{bottom:18px; left:55px}
33.3%{bottom:100px; left:107px;}
66.6%{bottom:100px; left:4px;}
100%{bottom:18px; left:55px}
}
@-o-keyframes a12{
0%{bottom:18px; left:55px}
33.3%{bottom:100px; left:107px;}
66.6%{bottom:100px; left:4px;}
100%{bottom:18px; left:55px}
}
</style>
</head>
<body>
<center>
<div class="one"></div>
<div class="two"></div>
</center>
</body>
</html>
以上是关于CSS3制作互动三角形的主要内容，如果未能解决你的问题，请参考以下文章