我想知道是否有可能制作一个正好从中心旋转的三角形。
代码笔
.html:
<div class="loader-wrapper">
<div class="loader"></div>
</div>
.css:
.loader-wrapper {
width: 100%;
height: 100vh;
background-color: #11e;
}
@keyframes load {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: 4s linear 0s infinite load;
}
一个完整的解决方案可能是这样的。
简单地说,您应该更改与三角形的实际中心匹配的变换原点(纯数学为 66.66%)。
目录:
<div class="loader">
<div class="loader-wrapper">
<div class="triangle"></div>
</div>
</div>
.CSS:
.loader {
display: inline-block;
position: relative;
width: 100%;
height: 300px;
}
.loader-wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
/* transform by half of its width & height */
transform: translate(-50%, -50%);
}
.triangle {
display: block;
position: relative;
width: 0;
height: 0;
border-color: transparent transparent #e44750 transparent;
border-width: 0px 100px 173.20508076px 100px;
border-style: solid;
transform-origin: 50% 66.66%;
animation: spin 3s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
transform-origin
属性可用于更改变形点的原点。 只需将transform-origin: 107px 111px;
添加到您的.loader
类中即可。
不过,您需要进行一些调整才能使其完美。
试试这个:
.loader {
position: relative;
top: 50%;
transform: translate(0, -50%);
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
animation: 4s linear 0s infinite load;
}
JSFiddle