特别的/高冷的/金属感的/css3/loading效果

等边三角形，每条边单独进入，转圈圈的纯css实现

现在画三角形多半是通过宽高为0的元素，用border来实现的，但是产品说：“想要一条线一条线单独出来，有一种连线的感觉”

哦....

不知道怎么录gif

反正是这个三角形连线出现 然后一直在转圈圈。

先写html。

大概是像这样↑的三条线。

随手画的，不要在意那么多细节。

然后写css，

line3不动，维持水平状态，

line1，大概是这样移动的

【球球不要说我画得丑】

先旋转120°，再右移1/4边长，再下移四分之根号三 边长，就去到该去的地方啦！

transform: translate3d(@lineWidth/4,@lineWidth/4*1.732,0) rotate(120deg); 这是用less写的。（用less，不用自己算四分之根号三边长到底是多少 hhhh）

line2同理。

到了旋转的时候，是默认以1/2宽高处为中心点旋转的。

这个是不行的！！等边三角形 看起来正确的旋转的中心点不是这个！

是这个！

所以要重新设置旋转中心点，

transform-origin:center @lineWidth/1.73/2; x轴是1/2处，所以写center。

y轴是二分之根号3倍边长。

完整代码：（纯白背景的话要加个背景色才能看出效果哦（body{background:black;}））

@lineWidth:240px; @coverDuration:0.7s; @keyframes stretchLine{ 0%{width:0px;} 100%{width:@lineWidth;} } @keyframes rotate{ 0%{ transform: rotate(0); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } }

.whiteTriWrap{
	position:absolute;
	top: 30%;
	left: 50%;
	transform: translate3d(-50%,0,0);
	.rotateAni{
		animation: rotate 3s linear @coverDuration*3 infinite;
		width: @lineWidth;
		height: @lineWidth;
		transform-origin:center @lineWidth/1.73/2; 
	}
	.lineWrap{
		position:relative;
		.line{
			height: 1px;
			background-color:white;
			width: 0px;
		}
		.dot{
			position:absolute;
			left: -5px;
			top: -5px;
			width: 10px;
			height: 10px;
			background-color:white;
			border-radius:50%;
		}
	}
	.line1{
		transform: translate3d(@lineWidth/4,@lineWidth/4*1.732,0) rotate(120deg);
		.line{
			animation:stretchLine @coverDuration ease 0s;
			animation-fill-mode: forwards;
		}
	}
	.line2{
		transform: translate3d(-@lineWidth/4,@lineWidth/4*1.732,0) rotate(240deg);
		.line{
			animation:stretchLine @coverDuration ease @coverDuration;
			animation-fill-mode: forwards;
		}
	}
	.line3{
		.line{
			animation:stretchLine @coverDuration ease @coverDuration*2;
			animation-fill-mode: forwards;
		}
	}
}