我有一個svg包含點的。我試圖讓這些點脈動。請參閱下面的示例，了解我正在嘗試實作的效果：
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px;
height: 20px;
width: 20px;
transform: scale(1);
animation: pulse-black 2s infinite;
}
@keyframes pulse-black {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}<div class="blobs-container">
<div class="blob"></div>
</div>現在，我的問題是，path這是在我的點svg，該transform物業已被使用內嵌定位的點svg。因此，我不能transform:scale();用來使我的元素脈動。請參閱下面的演示：
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* path.pink-dot{
transform: scale(1);
animation: pulse 2s infinite;
} */<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)" fill="#f277c6" />
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>如果取消注釋path.pink-dotcss，您將看到點消失（因為行內定位轉換屬性被覆寫）。
我想不出另一種方法來實作我所追求的目標而不使用transformCSS。我看到的唯一其他選擇是將其創建為Lottie animation.
我所追求的是否只能使用 CSS？
uj5u.com熱心網友回復：
最簡單的事情是引入一個父元素并將變換移動到那里。我還設定了 transform-origin 和 transform-b??ox，所以圓圈圍繞其中心縮放，我增加了縮放比例，所以發生的事情更明顯。
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
path.pink-dot{
transform: scale(1);
transform-origin: center;
transform-box: fill-box;
animation: pulse 2s infinite;
}<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<g transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)">
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" fill="#f277c6" />
</g>
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369053.html