在svg代碼中合并純CSS3維球體-有解無憂

1-第一個代碼是我添加到旋轉函式的svg圓（我從另一個Q的stackoverflow學習影片，關鍵幀）。并將其塑造成html正文。

<html>
<body>
<svg width="100" height="100">
<defs>   
<style id="style20"> #test {animation: wheel 4s infinite linear;transform-origin: center;transform-box: fill-box;} @keyframes wheel { from { transform: rotatex(360deg); } to { transform: rotatey(0deg);}}</style>
</defs>

<circle id="test" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="black" />
</svg> 
 
</body>
</html>

2-下一個代碼來自“如何創建純 CSS 3 維球體？”主題下的另一個問題的答案。[https://stackoverflow.com/questions/45238194/how-can-i-create-pure-css-3-dimensional-spheres][1]

.ball {
  position: absolute;
  top:0px;
  left:0px;
  width: 98vmin;
  height: 98vmin;
  margin: 1vmin;  
  transform-style: preserve-3d;  
  transform: rotateX(-5deg);
}

@keyframes rot{
  0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  100% { transform: rotateY(360deg) rotateX(0deg) rotateZ(0deg); }
}

.layer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 98vmin;
  height: 98vmin;
}

.moving
{
  transform-style: preserve-3d;
  transform-origin: 49vmin 49vmin;
  animation: rot 10s linear infinite;
}






.clip
{
  border-radius: 50%;  
  overflow:hidden;
  transform: translateZ(-0vmin);
}

     
 @keyframes highlightanim {     
  0.00% {left: -150.00%; top: -178.00% }
  12.50% {left: -117.67%; top: -179.64% }
  25.00% {left: -97.69%; top: -195.87% }
  28.75% {left: -95.00%; top: -207.09% }
  32.50% {left: -97.69%; top: -220.70% }
  40.00% {left: -117.67%; top: -240.01% }
  47.50% {left: -150.00%; top: -247.50% }
  55.00% {left: -182.33%; top: -240.01% }
  62.50% {left: -202.31%; top: -220.70% }
  68.75% {left: -205.00%; top: -207.09% }
  75.00% {left: -202.31%; top: -195.87% }
  87.50% {left: -182.33%; top: -179.64% }
  100.00% {left: -150.00%; top: -178.00% }
} 
  
.shade
{
  position: relative;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: radial-gradient(at 50% 50%, white, black, grey, black, black);
  animation: highlightanim 10s linear infinite;
}

<div class="ball">
  <div class='layer moving'>
     
    <div class='layer gridplane laser'></div>  
    <div class='layer gridplane laser2'></div>  
  </div> 
  <div class='layer clip'>
    <div class='shade'> 
    </div>
  </div>
</div>

3-如何將第二個代碼與第一個代碼放在同一個模型中（在html正文中，分為函式和受函式影響的路徑？

4-我嘗試在代碼中編輯 x、y 和 z 的值，使其看起來像圍繞 X 軸旋轉（從頁面向下到向上，與第一個代碼相同的方向），但沒有任何效果。有辦法嗎？

5-顏色，我嘗試改變值

感謝提前

uj5u.com熱心網友回復：

您的 HTML 的 SVG 等效項如下：

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

<svg viewBox="0 0 100 100" width="500">
  <defs>
    <radialGradient id="shade-gradient"
      cx="50%" cy="50%" r="70.7%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="25%" stop-color="black"/>
      <stop offset="50%" stop-color="grey"/>
      <stop offset="75%" stop-color="black"/>
      <stop offset="100%" stop-color="black"/>
    </radialGradient>
    
    <clipPath id="layer-clip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
  
  <rect class="shade" x="0" y="0" width="400" height="400"
        fill="url(#shade-gradient)" clip-path="url(#layer-clip)"/>
</svg>

請求：從下到上旋轉

最簡單的方法是將 SVG 旋轉 90 度。

不過我覺得效果不是很好。

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

<svg viewBox="0 0 100 100" width="500">
  <defs>
    <radialGradient id="shade-gradient"
      cx="50%" cy="50%" r="70.7%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="25%" stop-color="black"/>
      <stop offset="50%" stop-color="grey"/>
      <stop offset="75%" stop-color="black"/>
      <stop offset="100%" stop-color="black"/>
    </radialGradient>
    
    <clipPath id="layer-clip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
  
  <rect class="shade" x="0" y="0" width="400" height="400"
        fill="url(#shade-gradient)" clip-path="url(#layer-clip)"/>
</svg>

要求：改變顏色

只需更改漸變中的顏色即可。

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% {x: -150.00; y: -178.00 }
  12.50% {x: -117.67; y: -179.64 }
  25.00% {x: -97.69; y: -195.87 }
  28.75% {x: -95.00; y: -207.09 }
  32.50% {x: -97.69; y: -220.70 }
  40.00% {x: -117.67; y: -240.01 }
  47.50% {x: -150.00; y: -247.50 }
  55.00% {x: -182.33; y: -240.01 }
  62.50% {x: -202.31; y: -220.70 }
  68.75% {x: -205.00; y: -207.09 }
  75.00% {x: -202.31; y: -195.87 }
  87.50% {x: -182.33; y: -179.64 }
  100.00% {x: -150.00; y: -178.00 }
}

<svg viewBox="0 0 100 100" width="500">
  <defs>
    <radialGradient id="shade-gradient"
      cx="50%" cy="50%" r="70.7%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="25%" stop-color="#ff0000"/>
      <stop offset="50%" stop-color="#ff8080"/>
      <stop offset="75%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#ff0000"/>
    </radialGradient>
    
    <clipPath id="layer-clip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
  
  <rect class="shade" x="0" y="0" width="400" height="400"
        fill="url(#shade-gradient)" clip-path="url(#layer-clip)"/>
</svg>

向后兼容版本

在上面的示例中，我依賴于能夠使用 CSS 設定幾何屬性的樣式。在這種情況下x和y影片中。

樣式化幾何屬性是一個相對較新的東西，并非所有瀏覽器都支持。所以我在下面添加了一個更向后兼容的版本。

svg
{
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-90deg);
}

.shade
{
  animation: highlightanim 10s linear infinite;
}

@keyframes highlightanim {     
  0.00% { transform: translate(-150.00px, -178.00px); }
  12.50% { transform: translate(-117.67px, -179.64px); }
  25.00% { transform: translate(-97.69px, -195.87px); }
  28.75% { transform: translate(-95.00px, -207.09px); }
  32.50% { transform: translate(-97.69px, -220.70px); }
  40.00% { transform: translate(-117.67px, -240.01px); }
  47.50% { transform: translate(-150.00px, -247.50px); }
  55.00% { transform: translate(-182.33px, -240.01px); }
  62.50% { transform: translate(-202.31px, -220.70px); }
  68.75% { transform: translate(-205.00px, -207.09px); }
  75.00% { transform: translate(-202.31px, -195.87px); }
  87.50% { transform: translate(-182.33px, -179.64px); }
  100.00% { transform: translate(-150.00px, -178.00px); }
}

<svg viewBox="0 0 100 100" width="500">
  <defs>
    <radialGradient id="shade-gradient"
      cx="50%" cy="50%" r="70.7%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="25%" stop-color="#ff0000"/>
      <stop offset="50%" stop-color="#ff8080"/>
      <stop offset="75%" stop-color="#ff0000"/>
      <stop offset="100%" stop-color="#ff0000"/>
    </radialGradient>
    
    <clipPath id="layer-clip">
      <circle cx="50" cy="50" r="50"/>
    </clipPath>
  </defs>
  
  <g clip-path="url(#layer-clip)">
    <rect class="shade" x="0" y="0" width="400" height="400"
          fill="url(#shade-gradient)"/>
  </g>
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410813.html

標籤：

上一篇：為什么svganimateTransform只在第一個專案上激活？

下一篇：程式退出回圈，即使除錯也不明白為什么