0
我修改了动画，并增加了transform-origin的微调：d
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform-origin: top left;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
@keyframes spinner {
0% {
transform: rotate(0deg) translate(-50%,-50%);
}
100% {
transform: rotate(360deg) translate(-50%,-50%);
}
}
Loading...
-05-07 02:09:29
0
Flex的框溶液：显示作为flex元素的父元素，并对齐(垂直方向)和证明(水平地)其绝对定位的儿童到中心。
.spinner-animation{
width: 500px;
height: 500px;
background: gray;
display: flex;
align-items: center;
justify-content: center;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Loading...
-05-07 02:02:49
0
把span在另一个容器和应用position: absolute到这个容器
.spinner-animation {
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.holder {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.holder .spinner {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation>.content {
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Loading...
-05-07 02:03:08
0
在动画中的transform被覆盖translate()定位，您需要将translate()添加到您的动画transform属性中。
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
@keyframes spinner {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
Loading...
-05-07 02:08:37
