问

css3 - 为什么运行动画后，原本居中的位置却发生了偏移？

HK12593 发布于 2022-11-07 10:53

html

为什么运行动画后，原本居中的位置却发生了偏移？

6 个回答

你需要用绝对定位将要旋转的元素的初始点定位到元素的中心，正常的初始点是在左上
用left:50%;top:50%;margin-left:-20px/元素的二分之一/;margin-top:-20px/元素的二分之一/;
这样元素的旋转就不会出现交错了。

2022-11-12 01:38 回答

手机用户2502937333

原因是楼上说的，因为用了css3动画，所上面设置偏移的时候不要用transfrom,顺手把具体的代码写出来：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        .box1 {
            width: 600px;
            height: 200px;
            background: orange;
            position: relative;
        }

        .box1 span {
            position: absolute;
            border: 8px solid #fff;
            border-top: 8px solid transparent;
            border-radius: 999px;
            top: 50%;
            left: 50%;
            /*移除这里定位*/
        }

        .box1 span:nth-child(1) {
            width: 80px;
            height: 80px;
            /*新增*/
            margin-left: -40px;
            margin-top: -40px;
            animation: span1 2s  linear infinite ;
        }

        .box1 span:nth-child(2) {
            width: 40px;
            height: 40px;
            /*新增*/
            margin-left: -20px;
            margin-top: -20px;
            animation: span2 1s linear infinite ;
        }
        @keyframes span1 {
            0% {
                transform: rotate(360deg);
                opacity: 1;
            }
            50% {
                transform: rotate(180deg);
                opacity: .5;
            }
            100% {
                transform: rotate(0deg);
                opacity: 0;
            }
        }
        @-webkit-keyframes span1 {
            0% {
                transform: rotate(360deg);
                opacity: 1;
            }
            50% {
                transform: rotate(180deg);
                opacity: .5;
            }
            100% {
                transform: rotate(0deg);
                opacity: 0;
            }
        }

        @-webkit-keyframes span2 {
            0% {
                transform: rotate(0deg);
                opacity: .5;
            }
            50% {
                transform: rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: rotate(360deg);
                opacity: .5;
            }
        }
    </style>
</head>

<body>
    <p class="box1">
        <span></span>
        <span></span>
    </p>
</body>

</html>

2022-11-12 01:38 回答

染黑就是黑米粥_343

.box1 span{

position: absolute;
border: 8px solid #fff;
border-top: 8px solid transparent;
border-radius: 999px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
**transform-origin: 0 0;**

}
@-webkit-keyframes span1{

0%{transform: rotate(360deg) **translate(-50%,-50%);** opacity: 1;}
50%{transform: rotate(180deg) **translate(-50%,-50%);** opacity: .5;}
100%{transform: rotate(0deg) **translate(-50%,-50%);** opacity: 0;}

}
@-webkit-keyframes span2{

0%{transform: rotate(0deg) **translate(-50%,-50%);** opacity: .5;}
50%{transform: rotate(180deg) **translate(-50%,-50%);** opacity: 1;}
100%{transform: rotate(360deg) **translate(-50%,-50%);** opacity: .5;}

}

2022-11-12 01:38 回答

mobiledu2502885385

```
transform-origin: center;
```
2022-11-12 01:38 回答
这个坑我碰到过，你的定位转换别用transfrom,改成margin-left:-50%width;用了transfrom他会把初始位置定位到left:50%的地方。

2022-11-12 01:38 回答

平凡淘你

.box1 span:nth-child(1){
     width: 80px;
     height: 80px;
     animation: span1 2s  linear infinite ;
     margin: -40px 0 0 -40px;
}
.box1 span:nth-child(2){
     width: 40px;
    height: 40px;
    animation: span2 1s linear infinite ;
    margin: -20px 0 0 -20px;
}

2022-11-12 01:38 回答

鸵鸟家的大pp

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签