主页 / 问题 / 1445004
Accepted
TinturSoft
Asked:2022-09-02 16:30:47 +0000 UTC2022-09-02 16:30:47 +0000 UTC

css动画没有从原点均匀移动

  • 772

鉴赏家，需要帮助。有一个从一个点开始扩大圆圈的动画，但它以某种方式向一侧移动，并且在所有方向上都不是均匀的。请告诉我如何解决这个问题。最近在做动画

.changegalview{
    margin: 20px 20px;
}
    
.changegalview .circle1{
        border-radius: 50%;
        border: solid 3px #333;
      /*  transform: translateX(-80%) translateY(-20%); */
        position: absolute;
        opacity: 0.2;
        animation: changegalview 2s linear infinite 0.25s;
       top: 15px;
        left: 38px;
}
      
@keyframes changegalview {
      50% {
        width: 30px;
        height: 30px;
        opacity: 0.5; 
      }
    
      75% {
        width: 40px;
        height: 40px;
        opacity: 0.2; 
      }
    
      100% {
        width: 50px;
        height: 50px;
        opacity: 0.05; 
      } 
}
        
<span class="changegalview" data-type="map">
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="#f50101">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0046 25C13.0046 25 23.2319 18.1818 23.2319 10.2273C23.2319 7.51483 22.1544 4.91348 20.2364 2.9955C18.3184 1.07751 15.7171 0 13.0046 0C10.2922 0 7.69083 1.07751 5.77284 2.9955C3.85486 4.91348 2.77734 7.51483 2.77734 10.2273C2.77734 18.1818 13.0046 25 13.0046 25ZM16.4164 10.2272C16.4164 12.11 14.8901 13.6363 13.0073 13.6363C11.1246 13.6363 9.59826 12.11 9.59826 10.2272C9.59826 8.3444 11.1246 6.8181 13.0073 6.8181C14.8901 6.8181 16.4164 8.3444 16.4164 10.2272Z" fill="#BDBDBD"></path>
    </svg>
    <span class="circle1"></span>
</span>

css

1 个回答

  1. Best Answer

    那么，显然？

    .changegalview{
    margin: 20px 20px;
}
    
.changegalview .circle1{
        border-radius: 50%;
        border: solid 3px #333;
      /*  transform: translateX(-80%) translateY(-20%); */
        position: absolute;
        opacity: 0.2;
        animation: changegalview 2s linear infinite 0.25s;
       top: 60px;
        left: 60px;
}
      
@keyframes changegalview {
      0% {
        top: 60px;
        left: 60px;
        width: 0px;
        height: 0px;
        opacity: 0.5; 
      }
    

    
      100% {
        top: 35px;
        left: 35px;
        width: 50px;
        height: 50px;
        opacity: 0.05; 
      } 
}
    <span class="changegalview" data-type="map">
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="#f50101">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0046 25C13.0046 25 23.2319 18.1818 23.2319 10.2273C23.2319 7.51483 22.1544 4.91348 20.2364 2.9955C18.3184 1.07751 15.7171 0 13.0046 0C10.2922 0 7.69083 1.07751 5.77284 2.9955C3.85486 4.91348 2.77734 7.51483 2.77734 10.2273C2.77734 18.1818 13.0046 25 13.0046 25ZM16.4164 10.2272C16.4164 12.11 14.8901 13.6363 13.0073 13.6363C11.1246 13.6363 9.59826 12.11 9.59826 10.2272C9.59826 8.3444 11.1246 6.8181 13.0073 6.8181C14.8901 6.8181 16.4164 8.3444 16.4164 10.2272Z" fill="#BDBDBD"></path>
    </svg>
    <span class="circle1"></span>
</span>

    • 0

相关问题