CSS SVG Animation 用于 Slider

Question

I have a mockup image for a svg css animation for a slider here and want to implement this in css.

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

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

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

会很棒，谢谢！

更新：

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

Answer 1

我按照问题中的话做了

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

当 hover 在中间球上时，它的尺寸会增加并与两个相邻的球重叠

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

Answer 2

@Alexandr_TT

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

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link rel="stylesheet" href="/lib/flickity.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="/lib/flickity.pkgd.min.js"></script>
</body>
</html>