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 o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0