在 svg 代码中合并纯 CSS 3 维球体
merge pure CSS 3-dimensional spheres in svg code
1- 第一个代码是我添加到旋转函数的 svg 圆圈（我从另一个 Q 的 Whosebug 了解动画、关键帧）。并将其塑造成 html body.
<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 维球体？”的另一个问题的回答。
[
.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-如何将第二个代码与第一个代码放在同一个模具中（在 [=40= 的 body 内，划分为功能和受功能影响的路径？
4- 我尝试在代码中编辑 x、y 和 z 的值，使其看起来像绕 X 轴旋转（从页面向下到向上，与第一个代码相同的方向），但没有任何效果。有办法吗？
5-颜色，我尝试改变
的值
感谢提前
您的 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>
1- 第一个代码是我添加到旋转函数的 svg 圆圈（我从另一个 Q 的 Whosebug 了解动画、关键帧）。并将其塑造成 html body.
<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 维球体？”的另一个问题的回答。 [
.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-如何将第二个代码与第一个代码放在同一个模具中（在 [=40= 的 body 内，划分为功能和受功能影响的路径？
4- 我尝试在代码中编辑 x、y 和 z 的值，使其看起来像绕 X 轴旋转（从页面向下到向上，与第一个代码相同的方向），但没有任何效果。有办法吗？
5-颜色，我尝试改变
的值感谢提前
您的 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>