滑块的 CSS SVG 动画答案

【问题标题】：CSS SVG Animation for a Slider滑块的 CSS SVG 动画
【发布时间】：2022-01-10 01:51:53
【问题描述】：

我在这里有一个用于滑块的 svg css 动画的模型图像，并希望在 css 中实现它。

动画由一个带有当前数值的气球组成，应该从左到右或从右到左放大和缩小。

目前我处于起点，有点迷失如何解决这个问题。我的主要问题是如何放大或缩小这个气球，所以前面的气球与背景中的 2 个气球重叠。

有没有人有类似的样本或者可以指出正确的方向如何解决这个问题？

太好了，谢谢！

更新：

请原谅我的绘画技巧不佳，但我希望这能更好地解释它：

【问题讨论】：

我正确理解了中间的气球应该扩大并与另外两个相邻的气球重叠？
是的，它应该用于滑块，当改变值时，可能从3到4，它应该将当前正确位置的气球移动到动画中间的前景中并且显示一个 4。而过去的气球与 3 一起在动画中的正确位置作为背景。我希望我解释得很好。 ;)
单词有不同的理解方式如果您在动画结束后添加第二个屏幕截图来说明它的外观会很好
请原谅我的绘画技巧不佳..添加了另一张图片，我希望它能更好地解释它。
仍然不确定我是否理解其意图，您是否想为它们旋转的气泡制作一个旋转木马，并根据滑块元素的值 +/- 它们的比例？我不确定滑块是如何真正发挥作用的，无论哪种方式，我都没有看到你自己的任何尝试，只是要求......

标签： javascript html css svg

【解决方案1】：

@Alexandr_TT

太好了，这是朝着正确的方向发展。我在 js 中将其实现为轮播幻灯片动画，但希望将其实现为单个 svg 动画，就像初始帖子中的图像一样仅用于显示。

这是我的代码：

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Animation</title>
        <link rel="stylesheet" href="<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">" media="screen">
        <style>
            * { box-sizing: border-box; }
    
            body { font-family: sans-serif; }
    
            .carousel {
                background: white;
            }
    
            .carousel-cell {
                width: 70%;
                height: 200px;
                display: -webkit-box;
                display: -webkit-flex;
                display:         flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
            }
    
            .carousel-cell svg {
                display: block;
                max-width: 100%;
                max-height: 100%;
                opacity: 1;
                -webkit-transform: scale(0.85);
                transform: scale(0.85);
                -webkit-transition: opacity 1s, -webkit-transform 0.8s, transform 0.8s, -webkit-filter 0.8s, filter 0.8s;
                transition: opacity 1s, transform 0.8s, filter 0.8s;
            }
    
            .carousel-cell.is-selected svg {
                opacity: 1;
                -webkit-transform: scale(2);
                transform: scale(2);
                -webkit-filter: none;
                filter: none;
            }
    
            @media screen and ( min-width: 768px ) {
                .carousel-cell {
                    height: 400px;
                }
            }
    
            @media screen and ( min-width: 960px ) {
                .carousel-cell {
                    width: 10%;
                }
            }
            .flickity-prev-next-button {
                width: 60px;
                height: 60px;
                background: transparent;
                opacity: 1;
            }
            .flickity-prev-next-button:hover {
                background: transparent;
                opacity: 1;
            }
            /* arrow color */
            .flickity-prev-next-button .arrow {
                fill: white;
            }
            .flickity-prev-next-button.no-svg {
                color: white;
            }
            /* closer to edge */
            .flickity-prev-next-button.previous { left: 0; }
            .flickity-prev-next-button.next { right: 0; }
            /* hide disabled button */
            .flickity-prev-next-button:disabled {
                display: none;
            }
        </style>
    </head>
    <body>
    
    <div class="carousel js-flickity">
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="left" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="middle" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
        <div class="carousel-cell">
            <svg width="440" height="440" viewBox="-50 -50 550 550" xmlns="http://www.w3.org/2000/svg">
                <g fill="#F1C056" transform="matrix(0.464127, 0, 0, 0.464127, 108.349289, 107.221474)" style="">
                    <path id="right" d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z"/>
                </g>
            </svg>
        </div>
    </div>
    
    
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    </body>
    </html>

【讨论】：

【解决方案2】：

我是按照问题里的话做的

我的主要问题是如何放大或缩小这个气球，所以前面的气球与背景中的 2 个气球重叠。

当您将鼠标悬停在中间的球上时，它的大小会增大并与两个相邻的球重叠

#middle {
transform-origin:center;
transform-box:fill-box;

}
#middle:hover {
animation:scaled  0.8s linear forwards;
fill:#CDA349;
} 

@keyframes scaled {
100%{transform:scale(2.1);}
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="440" height="440" viewBox="-50 -50 550 550">
    <g fill="#F1C056">
  
  <path d="M311.4 157.5c14.2-4.3 34.3 6.6 46.1 18.2a44.3 44.3 0 0 1 12.6 30.3c.1 23.4-14.8 44.8-26.1 65.3-7.4 13.4-15.2 22.8-27 37.3-8.1-11-18.4-23.8-27.6-40.1 5.9-14 14.6-27.6 19.6-42.2 3.8-11 7.5-22.2 8-33.8.4-11.8-2.7-18-5.6-35z"  />
  <path d="M125.6 160.8c-9.6-5.8-23.1-4.8-33.8-1.2a55.7 55.7 0 0 0-35.4 58.5c3.1 14.2 11 27.1 17.8 40a277 277 0 0 0 16.4 26.5c5.6 8.3 11 17 18 24 14.5-20.6 22-30.4 33-51.3-4-12.9-13-26.4-16.7-40.6a111.2 111.2 0 0 1-4.3-33.3c.3-7.7 3-12.7 5-22.6z"   />
  <path id="middle"  d="M218.6 355.2a469 469 0 0 1-46.5-69.5c-15-28.4-32.4-52.7-38.3-79.7a89.4 89.4 0 0 1 20-73.6 89 89 0 0 1 65.7-28.5 91.2 91.2 0 0 1 64.4 29.4c14.9 16.7 25 41.8 21 63.9-6 32.4-24.9 60.1-40.6 88.5a492.4 492.4 0 0 1-45.7 69.5z" />
   </g>
</svg>

【讨论】：