Question

当尝试使用CSS关键帧通过从0deg到360deg应用旋转功能并通过平移功能指定圆的半径来沿圆形路径移动元素时，它会保持在相同位置。

我已经在HTML文件上尝试过这种方式，并且效果很好。我通过指定每6.25％和某些区域3.125％的旋转度来实现所需的运动，以这种方式听起来不规则，但是它不会像浏览器那样在精确的圆形路径中移动。

#meePic {
    position: absolute;
    width: 200px;
    height: 200px;
    background-position: center top;
    background-size: cover;
    border-width: 5px;
    border-color: grey;
    border-radius: 50%;
    top: 300px;
    left: 400px;
    animation-name: orbit;
    animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-timing-function: linear;
}
/* this is the not working code*/
/*@keyframes orbit {
    from {
        transform: rotate(0deg) translate(-50px) rotate(0deg);
    }
    to{
        transform: rotate(360deg) translate(-50px) rotate(-360deg);
    }
}*/

@keyframes orbit {
from {
    transform: rotate(0deg) translate(-50px) rotate(0deg);
}

6.25% {
    transform: rotate(22.5deg) translate(-50px) rotate(-22.5deg);
}

12.5% {
    transform: rotate(45deg) translate(-50px) rotate(-45deg);
}

18.75% {
    transform: rotate(67.5deg) translate(-50px) rotate(-67.5deg);
}

25% {
    transform: rotate(90deg) translate(-50px) rotate(-90deg);
}

31.75% {
    transform: rotate(112.5deg) translate(-50px) rotate(-112.5deg);
}

37.5% {
    transform: rotate(135deg) translate(-50px) rotate(-135deg);
}

43.75% {
    transform: rotate(157.5deg) translate(-50px) rotate(-157.5deg);
}

50% {
    transform: rotate(180deg) translate(-50px) rotate(-180deg);
}

53.125%{
    transform: rotate(191.25deg) translate(-50px) rotate(-191.25deg);
}

56.25% {
    transform: rotate(202.5deg) translate(-50px) rotate(-202.5deg);
}

62.5% {
    transform: rotate(225deg) translate(-50px) rotate(-225deg);
}

68.75% {
    transform: rotate(247.5deg) translate(-50px) rotate(-247.5deg);
}

71.875% {
    transform: rotate(258.75deg) translate(-50px) rotate(-258.75deg);
}

75% {
    transform: rotate(270deg) translate(-50px) rotate(-270deg);
}

78.125% {
    transform: rotate(281.25deg) translate(-50px) rotate(-281.25deg);
}

81.25% {
    transform: rotate(292.5deg) translate(-50px) rotate(-292.5deg);
}

84.375% {
    transform: rotate(303.75deg) translate(-50px) rotate(-303.75deg);
}

87.5% {
    transform: rotate(315deg) translate(-50px) rotate(-315deg);
}

90.625% {
    transform: rotate(326.25deg) translate(-50px) rotate(-326.25deg);
}

93.75% {
    transform: rotate(337.5deg) translate(-50px) rotate(-337.5deg);
}

96.875% {
    transform: rotate(348.75deg) translate(-50px) rotate(-348.75deg);
}

to {
    transform: rotate(360deg) translate(-50px) rotate(-360deg);
}
}

关于在Nativescript上应用CSS关键帧，我是否不了解？还是Nativescript框架中的错误？

如何在Nativescript中的圆形路径中移动元素？

0 个答案: