如何使位置绝对css动画响应？答案

【问题标题】：How to make a position absolute css animation responsive?如何使位置绝对css动画响应？
【发布时间】：2019-04-24 03:44:20
【问题描述】：

所以我得到了这个 css 动画，其中 5 个圆圈在一些文本之间旋转；

（大小不一）

#circle .circle1{
    position: absolute;
    top: 1330px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle2{
    position: absolute;
    top: 1380px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #B90091;
    border-right: 20px solid #B90091;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle3{
    position: absolute;
    top: 1480px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}



#circle .circle4{
    position: absolute;
    top: 1430px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid #5E0DAC;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle5{
    position: absolute;
    top: 1530px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: inline-block;
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}

<html>
    <div id="circle">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
          </div> 

</html>

使该动画具有响应性的最简单方法是什么？为此，我必须在媒体查询中编辑每个像素的高度和宽度。

询问是否有更简单的方法。

干杯

【问题讨论】：

css 媒体查询。
当然可以，但是对于每个屏幕高度和宽度，我都必须以 px 换 px。我的问题是，是否有一个简单的解决方法。
每个圆圈的大小和它们旋转的文本之间的关系是什么？例如，圆圈 1 是否总是文本大小的两倍？
您好，您能否将所有内容都包含在 sn-p 编辑器中，以便我们可以准确地重现您看到的内容？当您编辑问题时，它将是文本编辑器上的 <> 按钮。
@Ypoulakas 每个圆圈的大小相差 100 像素。所以顶部有 50px 的差异：（绝对高度）

标签： css responsive-design css-position responsive absolute

【解决方案1】：

这可能不是您问题的完整答案，因为它不是 100% 响应的，但它是让媒体查询更容易的起点。

代码更加基于分类，例如每个环都有一个紫色或粉红色类来获取其颜色，并且圆圈之间的所有公共元素现在都在一个类中。

动画时间和位置等差异现在针对每个环的单独 id，更重要的是，环是基于相对于彼此的百分比。以我在 500px 处 100% 取的外圈为基础，位置元素取其相对。

我添加了一个新的容器 div 来保存和定位您认为合适的圆形动画。它会尝试将自己推出以适应该空间的尺寸，因此您可以根据需要在媒体查询中调整其高度和宽度。您还可以调整媒体查询中的边框宽度等内容，使其看起来更符合整体尺寸。

说实话，如果我要从头开始处理这样的动画，我会考虑使用基于 SVG 的解决方案。

.circleHolder {
  height: 540px; /* main ring is 500px + the 40px (for the border @20px) */
  width: 540px; /*     border-width:20px; /* media queries should target this value and the height */
  top: 200px; 
  left: 200px;
  position:absolute;
}

#circle {
  height: 100%;
  width: 100%;
  position:relative;

}

.circle {
    border-radius: 50%;
    display: inline-block;
    margin: 0 auto;
    text-align:center;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
    position:absolute;
    border-style: solid;
    border-width:20px; /* media queries should target this value */ 

}


.purpleCircle {

        border-top-color: #5E0DAC;
        border-right-color: transparent;
        border-bottom-color: #5E0DAC;
        border-left-color: transparent;  

}

.pinkCircle {
    border-top-color: #B90091;
    border-right-color: #B90091;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.circle1{ 
    height: 100%;
    width: 100%;  
    animation-name: circle1;
    animation-duration: 18s;
}

.circle2{
    
    top:  10%;
    left: 10%;
    height: 80%;
    width: 80%;  
    animation-name: circle2;
    animation-duration: 8s;
}

.circle3{
    top: 30%;
    left: 30%;
    height: 40%;
    width: 40%;  
    animation-name: circle1;
    animation-duration: 6s;
}

.circle4{
    top: 20%;
    left: 20%;
    height: 60%;
    width: 60%;
    animation-name: circle1;
    animation-duration: 13s;
}

.circle5{
    top: 40%;
    left: 40%;
    height: 20%;
    width: 20%;    
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}

    <html>
      <div class="circleHolder">
        <div id="circle">
                <div class="circle circle1 purpleCircle"></div>
                <div class="circle circle2 pinkCircle"></div>
                <div class="circle circle3 purpleCircle"></div>
                <div class="circle circle4 purpleCircle"></div>
                <div class="circle circle5 pinkCircle"></div>
              </div> 
      </div>
    </html>

【讨论】：

这个动画把我吓坏了。

【解决方案2】：

感谢您的帮助，这对我很有帮助！

所以我想通了，我只需要给父元素#circle 一个位置：relative;属性，所以我只需要对齐这一个元素。

#circle{
position: relative;
bottom: 750px;

【讨论】：