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

代码语言:html

所属分类:布局界面

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

代码标签: 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  o.........完整代码请登录后点击上方下载按钮下载查看

网友评论0