滑块的CSS SVG动画
滑块的CSS SVG动画
提问于 2021-12-03 17:46:29
我这里有一个滑块的svg css动画的样机图像，并希望在css中实现这一点。
动画由具有当前数值的引出序号组成，应该从左到右或从右到左进行放大和缩小。
目前我还处于起步阶段，不知道该如何解决这个问题。对于我来说，主要的问题是如何放大或缩小这个气球，这样前面的气球就会重叠在背景中的两个气球上。
有没有人有类似的样本，或者可以给我指出正确的方向，如何解决这个问题？
太好了，谢谢！
更新：
请原谅我糟糕的绘画技巧，但我希望这能更好地解释它：
回答 2
Stack Overflow用户
发布于 2021-12-03 19:38:46
我是根据问题中的话做的。
对我来说，主要的问题是如何放大或缩小这个气球，这样前面的气球就会重叠在背景中的两个气球上。
当您将鼠标悬停在中间的球上时，它的大小会增加并与两个相邻的球重叠。
#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>
Stack Overflow用户
发布于 2021-12-03 21:10:25
@Alexandr_TT
很好，这是朝着正确的方向发展的。我在js中将其实现为caroussel幻灯片动画，但希望将其实现为一个单独的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70218648
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号