我有一個用于滑塊的 svg css 影片的模型影像，并希望在 css 中實作它。
影片由一個帶有當前數值的氣球組成，應該從左到右或從右到左放大和縮小。
目前我處于起點，有點迷失了如何解決這個問題。我的主要問題是如何放大或縮小這個氣球，所以前面的氣球與背景中的 2 個氣球重疊。
有沒有人有類似的樣本，或者可以指出我如何解決這個問題的正確方向？
會很棒，謝謝！
更新：
原諒我糟糕的繪畫技巧，但我希望這能更好地解釋它：
uj5u.com熱心網友回復：
我按照問題中的話做了
我的主要問題是如何放大或縮小這個氣球，所以前面的氣球與背景中的 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>uj5u.com熱心網友回復：
@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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/374148.html
標籤：javascript html css svg
上一篇：SVG中嵌套類的CSS選擇器
下一篇：調整SVG大小以填充div