我刚开始使用 svg 代码。我正在尝试用 css 制作动画，我也在使用波旁威士忌。什么都没有发生，我不明白为什么。任何人都可以看到我的代码有什么问题吗？
它在 firefox 或 webkit (chrome) 中不工作
谢谢:
<body>
<svg viewBox="0 0 200 200">
<g id="chemistry">
<g id="bubbles">
<circle id="bubble1" class="liquid" cx="54.2" cy="141.4" r="8"/>
<circle id="bubble2" class="liquid" cx="65.2" cy="139.4" r="8"/>
<circle id="bubble3" class="liquid" cx="77.2" cy="138.4" r="8"/>
<circle id="bubble4" class="liquid" cx="86.2" cy="140.4" r="8"/>
<circle id="bubble5" class="liquid" cx="97.2" cy="135.4" r="8"/>
<circle id="bubble6" class="liquid" cx="108.2" cy="138.4" r="8"/>
<circle id="bubble7" class="liquid" cx="117.2" cy="134.4" r="8"/>
<circle id="bubble8" class="liquid" cx="127.2" cy="137.4" r="8"/>
<circle id="bubble9" class="liquid" cx="136.2" cy="134.4" r="8"/>
<circle id="bubble10" class="liquid" cx="146.2" cy="136.4" r="8"/>
</g>
<g id="liquid">
<polygon class="liquid" points="176.3,181.6 22.1,180 46,139.9 147,135.7"/>
</g>
<g id="bottle">
<path class="bottle" d="M188.5,171.2c4.8,7.6,5.7,14.1,2.7,19.5c-2.9,5.4-8.9,8.1- 17.9,8.1h-147c-9,0-15-2.7-17.9-8.1
c-2.9-5.4-2-11.9,2.7-19.5L75.3,70V19.1h-8.2c-2.2,0-4.1-0.8-5.7-2.4c-1.6-1.6-2.4-3.5-2.4-5.7c0-2.2,0.8-4.1,2.4-5.7
c1.6-1.6,3.5-2.4,5.7-2.4h65.3c2.2,0,4.1,0.8,5.7,2.4c1.6,1.6,2.4,3.5,2.4,5.7c0,2.2-0.8,4.1-2.4,5.7c-1.6,1.6-3.5,2.4-5.7,2.4
h-8.2V70L188.5,171.2z M89,78.7L26,178.2l71.9-0.6l74.8,0.9l-62.2-99.8l-2.6-4V70V19.1H91.6V70v4.7L89,78.7z"/>
</g>
</g>
</svg>
</body>
带有波旁的 CSS:
body {
background: #3b3b3d;
}
svg {
display: block;
margin: 10% auto;
width: 300px;
height: 300px;
}
@include keyframes (scale) {
0% {
@include transform(scale(1));
}
25% {
@include transform(scale(1.75));
}
50% {
@include transform(scale(0.5));
}
75% {
@include transform(scale(1.25));
}
100% {
@include transform(scale(1));
}
}
#chemistry {
@include animation(scale 3.0s ease-in infinite);
}
.bottle {
fill: #2BAAD6;
}
.liquid {
fill: #D960EA;
}
谢谢
最佳答案
使用以下波旁威士忌并通过 sassmeister 运行它:
@import "bourbon/bourbon";
body {
background: #3b3b3d;
}
svg {
display: block;
margin: 10% auto;
width: 300px;
height: 300px;
}
@include keyframes (scale) {
0% {
@include transform-origin(center center);
@include transform(translateY(50px));
@include transform(scale(1));
}
25% {
@include transform(scale(1.75));
}
50% {
@include transform(scale(0.5));
}
75% {
@include transform(scale(1.25));
}
100% {
@include transform(scale(1));
}
}
#bubbles .liquid {
@include animation(scale 3.0s ease-in infinite);
}
.bottle {
fill: #2BAAD6;
}
.liquid {
fill: #D960EA;
}
产量:http://jsfiddle.net/km4u9/2/气泡在 flask 中活跃的地方。调整动画值以将效果调整为您想要的结果。我确实在 <path> 中包含了一些空格svg 中的元素。
关于SVG 上的 CSS 动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22274917/