Question

所以我得到了这个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>

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

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

欢呼

Answer 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>

Answer 2

感谢您的帮助，这真的帮助了我！

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

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

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

2 个答案: