我正在嘗試在我的網站主頁中實作一個簡單的 blob 影片。我能夠看到第一個 blob svg，但影片似乎不起作用。提前感謝所有答案。我在這里復制粘貼我的 HTML 和 CSS 規則。
HTML：
<div class="intro-img col-lg-6">
<div class="blob">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="blob" width="600">
<path fill="#FE17A2" d="M59.1,-33.9C71.6,-12.5,73.4,15.4,61.7,35.4C50.1,55.4,25,67.5,-1.8,68.6C-28.7,69.6,-57.4,59.7,-69.8,39.2C-82.3,18.7,-78.5,-12.2,-64.1,-34.7C-49.8,-57.2,-24.9,-71.2,-0.8,-70.8C23.3,-70.3,46.6,-55.3,59.1,-33.9Z" transform="translate(100 100)" />
</svg>
</div>
</div>
CSS：
.intro-img{
height: 90vh;
justify-content: center;
text-align: center;
}
#blob{
animation : blob 5s linear infinite;
}
@keyframes blob {
0%{
d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
}
25%{
d : path("M68.3,-38.6C82.6,-14.7,84.2,17.4,70.6,38.1C57.1,58.7,28.6,68,2.4,66.6C-23.7,65.2,-47.4,53.1,-60,32.9C-72.7,12.8,-74.3,-15.5,-62.4,-38C-50.6,-60.4,-25.3,-77.1,0.9,-77.6C27,-78.1,54.1,-62.4,68.3,-38.6Z");
}
50%{
d : path("M65.4,-37C79.1,-14.1,80.5,16.6,67.5,37C54.6,57.5,27.3,67.8,0,67.8C-27.3,67.8,-54.6,57.5,-66.3,37.8C-78,18,-74.1,-11.3,-60.5,-34.2C-46.8,-57,-23.4,-73.5,1.2,-74.2C25.9,-74.9,51.8,-59.9,65.4,-37Z");
}
75%{
d : path("M57.1,-35.2C68.5,-13.3,68.3,13,56.8,32.4C45.4,51.9,22.7,64.4,-1.4,65.2C-25.6,66.1,-51.2,55.2,-63,35.5C-74.9,15.9,-73,-12.6,-60.2,-35.3C-47.4,-58,-23.7,-74.9,-0.4,-74.7C22.9,-74.4,45.8,-57,57.1,-35.2Z");
}
100%{
d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
}
}
uj5u.com熱心網友回復：
.intro-img{
height: 90vh;
justify-content: center;
text-align: center;
}
#blob path {
animation : blob 5s linear infinite;
}
@keyframes blob {
0%{
d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
}
25%{
d : path("M68.3,-38.6C82.6,-14.7,84.2,17.4,70.6,38.1C57.1,58.7,28.6,68,2.4,66.6C-23.7,65.2,-47.4,53.1,-60,32.9C-72.7,12.8,-74.3,-15.5,-62.4,-38C-50.6,-60.4,-25.3,-77.1,0.9,-77.6C27,-78.1,54.1,-62.4,68.3,-38.6Z");
}
50%{
d : path("M65.4,-37C79.1,-14.1,80.5,16.6,67.5,37C54.6,57.5,27.3,67.8,0,67.8C-27.3,67.8,-54.6,57.5,-66.3,37.8C-78,18,-74.1,-11.3,-60.5,-34.2C-46.8,-57,-23.4,-73.5,1.2,-74.2C25.9,-74.9,51.8,-59.9,65.4,-37Z");
}
75%{
d : path("M57.1,-35.2C68.5,-13.3,68.3,13,56.8,32.4C45.4,51.9,22.7,64.4,-1.4,65.2C-25.6,66.1,-51.2,55.2,-63,35.5C-74.9,15.9,-73,-12.6,-60.2,-35.3C-47.4,-58,-23.7,-74.9,-0.4,-74.7C22.9,-74.4,45.8,-57,57.1,-35.2Z");
}
100%{
d : path("M67.2,-41.6C78.5,-19.4,72.9,9.7,58.9,34.3C44.8,58.9,22.4,78.9,-0.9,79.4C-24.2,79.9,-48.5,61,-59.4,38.2C-70.3,15.4,-67.9,-11.2,-55.8,-33.9C-43.6,-56.6,-21.8,-75.5,3.1,-77.2C28,-79,56,-63.8,67.2,-41.6Z");
}
}<div class="intro-img col-lg-6">
<div class="blob">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="blob" width="600">
<path fill="#FE17A2" d="M59.1,-33.9C71.6,-12.5,73.4,15.4,61.7,35.4C50.1,55.4,25,67.5,-1.8,68.6C-28.7,69.6,-57.4,59.7,-69.8,39.2C-82.3,18.7,-78.5,-12.2,-64.1,-34.7C-49.8,-57.2,-24.9,-71.2,-0.8,-70.8C23.3,-70.3,46.6,-55.3,59.1,-33.9Z" transform="translate(100 100)" />
</svg>
</div>
</div>uj5u.com熱心網友回復：
我發現了這個問題，在為選擇器撰寫 blob 的影片規則時包含路徑（您要在此處設定影片的路徑），而不是使用：
#blob{
animation : blob 5s linear infinite;
}
采用：
#blob path{
animation: blob 5s linear infinite;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/468996.html