无法使此 CSS 动画居中

Posted 2023-03-06

【中文标题】无法使此 CSS 动画居中

【英文标题】：Unable to make this CSS Animation centered

【发布时间】：2022-01-14 13:32:23

【问题描述】：

我正在为一个加载器制作动画。但我需要让它具有响应性（台式机更大，智能手机更小）并使其始终居中。

我已经完成了响应部分。但我不能居中...

   :root
    --color1:rgb(95, 69, 35);
    --color2:rgb(160, 125, 79);
    --color3:rgb(216, 183, 140);
    --size: clamp(5rem, 7vw, 10rem); 
    --duration:1.5s;



 .contenedor 
    max-width: 800px;
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(calc(var(--size)/2), calc(var(--size)/2));
    vertical-align: center;



.animacion  
    position: relative;    
    border-radius: 50%;
    border: 5px solid transparent;
    margin: auto;    
    animation: vueltas1 var(--duration) ease-out infinite;        



.animacion:first-child 
    width: var(--size);
    height: var(--size); 
    border-color: var(--color1) transparent var(--color1) var(--color1);


.animacion:nth-child(2)      
    width: calc(var(--size) * 0.7);
    height: calc(var(--size) * 0.7);
    top: calc(var(--size) * -0.95);    
    border-color: transparent var(--color2) var(--color2) transparent;
    animation-timing-function: ease-in;
    animation-direction: reverse;    



.animacion:last-child      
    width: calc(var(--size) * 0.4);
    height:calc(var(--size) * 0.4);
    top:calc(var(--size) * -1.6);    
    border-bottom-color: var(--color3);    



@keyframes vueltas1 
    0%transform: rotate(0deg)
    100%transform: rotate(360deg)

       <div class="contenedor">
             <div class="animacion"></div>
            <div class="animacion"></div>
            <div class="animacion"></div>
       </div>

¿有人可以帮忙吗？我还在学习 CSS，这部分对我来说越来越难了。

非常感谢您。

【问题讨论】：

你的意思是你想让它水平和垂直居中对吗？

是的，就是这样！！

居中问题很多，基本思路是把item从上往左推50%，然后将其变换-50% x和y

问题是我没有实现它，因为钳位函数移动了一切......

【参考方案1】：

使用 flexbox 尝试此解决方案。但运行“整页”，因为 sn-p 预览无法正确居中。

:root
    --color1:rgb(95, 69, 35);
    --color2:rgb(160, 125, 79);
    --color3:rgb(216, 183, 140);
    --size: clamp(5rem, 7vw, 10rem); 
    --duration:1.5s;



 .contenedor 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    min-height: 100%;
    display: flex;

justify-content: center;
 

.center-this 
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;




.animacion  

position: relative;
    border-radius: 50%;
    border: 5px solid transparent;
    animation: vueltas1 var(--duration) ease-out infinite;        



.animacion:first-child 
    width: var(--size);
    height: var(--size); 
    border-color: var(--color1) transparent var(--color1) var(--color1);


.animacion:nth-child(2)      
    width: calc(var(--size) * 0.7);
    height: calc(var(--size) * 0.7);
    top: calc(var(--size) * -0.95);    
    border-color: transparent var(--color2) var(--color2) transparent;
    animation-timing-function: ease-in;
    animation-direction: reverse;    



.animacion:last-child      
    width: calc(var(--size) * 0.4);
    height:calc(var(--size) * 0.4);
    top:calc(var(--size) * -1.6);    
    border-bottom-color: var(--color3);    



@keyframes vueltas1 
    0%transform: rotate(0deg)
    100%transform: rotate(360deg)

<div class="contenedor">
  <div class="center-this">
    <div class="animacion"></div>
    <div class="animacion"></div>
    <div class="animacion"></div>
  </div>
</div>