svg+css实现立体科技小球动画效果代码-html代码-BFW代码库

svg+css实现立体科技小球动画效果代码

代码语言：html

代码描述：svg+css实现立体科技小球动画效果代码向动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .container {
          taxt-align:center;
          width:100%;
        }
        svg {
          width:600px;
          display:block;
          margin:100px auto;
        }
    </style>


</head>

<body>
    <div class="container">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1280" style="enable-background:new 0 0 1280 1280;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#SVGID_1_);}
	.st1{fill:url(#SVGID_2_);}
	.st2{fill:url(#SVGID_3_);}
	.st3{fill:#202020;}
	.st4{fill:#AFAFAF;}
	.st5{fill:#FFFFFF;}
	.st6{fill:none;stroke:#231F20;stroke-width:5.0998;stroke-miterlimit:10;}
	.st7{opacity:0.9;fill:url(#gost_1_);}
</style>
<g>
	
		<radialGradient id="SVGID_1_" cx="743.2467" cy="1343.0248" r="314.0572" gradientTransform="matrix(0.7399 0 0 0.2993 108.1045 421.553)" gradientUnits="userSpaceOnUse">
		<stop  offset="3.481095e-03" style="stop-color:#434343"/>
		<stop  offset="1" style="stop-color:#FFFFFF"/>
	</radialGradient>
	<ellipse class="st0" cx="658" cy="823.6" rx="232.4" ry="94"/>
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="652.0959" y1="861.301" x2="652.0959" y2="356.949">
		<stop  offset="0" style="stop-color:#A79CA2"/>
		<stop  offset="0.2178" style="stop-color:#EAEBEC"/>
	</linearGradient>
	<circle class="st1" cx="652.1" cy="590.5" r="262.2"/>
	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="647.4109" y1="671.1379" x2="647.4109" y2="328.2681">
		<stop  offset="3.481095e-03" style="stop-color:#434343"/>
		<stop  offset="1" style="stop-color:#1C1C1C"/>
	</linearGradient>
	<path class="st2" d="M648.1,671.1c-313,0-254.1-133.8-246.5-158.4c33.1-106.9,132.7-184.5,250.5-184.5
		c108.6,0,201.8,66,241.6,160.1C907,519.8,943.1,671.1,648.1,671.1z"/>
	<path class="st3" d="M443.5,561.1c6.1-6.7,12.1-13.4,18.1-20.3c13.9-15.9,26.9-31.6,39.3-47.3c0.7-2,1.5-3.9,2-5.9
		c0.9-3,1.6-6,2.3-9.1c0.3-1.6,0.5-3.2,0.9-4.7c0,0,0-0.1,0-0.1c0-0.2,0-0.4,0-0.6c0.9-12,2-24,2.9-35.9c1.8-23.4,3.9-48.3,9.2-72.2
		C463,397.9,421,450.3,401.6,512.7c-3.5,11.3-3.8,40,21.4,67.7C429.7,573.8,436.5,567.4,443.5,561.1z"/>
	<path class="st3" d="M893.7,488.4c-34.9-82.6-110.9-143.5-202.4-157.2c8.5,8.5,16.5,17.7,23.8,27.5c17.8,23.6,30.6,50.5,40.5,78.3
		c9.2,25.8,13.7,52.8,20.9,79.1c7.8,28.8,15.2,57.6,18,87.4c0.5,5.6,0.8,11.3,0.9,17C890,583.1,903.3,511.2,893.7,488.4z"/>
	<path class="st4" d="M893.7,488.4c-29.6-73.5-74.3-115.5-145.8-143.6c7.4,5.5,14.4,11.5,21.1,18c20.7,20.2,36.4,45.5,46,73.4
		c9.4,27.3,12.5,61.7,3.7,89.6c-2,6.4-4.9,12.4-6.9,18.8c-0.8,2.4-1.8,10.9-1.3,3.6c-0.2,2.3-0.3,4.3-0.6,6.8
		c-0.1,0.4-.........完整代码请登录后点击上方下载按钮下载查看