svg实现星球大战纪念飞船效果代码
代码语言:html
所属分类:布局界面
代码描述:svg实现星球大战纪念飞船效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #252535; } svg { fill: none; height: 100%; stroke: none; width: 100%; } .canvas-space { height: 90wh; margin: 10px auto 0; max-width: 1000px; width: 90vw; } </style> </head> <body > <div class="canvas-space"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 320"> <defs> <mask id="noseMask" fill="#000"> <rect x="170" y="0" width="90" height="60" fill="#fff" /> <circle cx="199.1" cy="21" r="3"/> <circle cx="228" cy="21" r="3"/> <circle cx="194" cy="33" r="3"/> <circle cx="234" cy="33" r="3"/> </mask> <mask id="blueRadialGradMask" fill="#fff"> <path d="M214 87.5 l-69 -55 138 0 -69 55z" /> </mask> <mask id="redRadialGradMask" fill="#000"> <path fill="#fff" d="M159 54 l110 0 0 95 -110 0z" /> <path d="M160 79 l11 2.2 0 18.5 -11 2.2" /> <path d="M267.5 79 l-11 2.2 0 18.5 11 2.2" /> </mask> <radialGradient id="gradRadialRed"> <stop offset="0%" stop-color="#232f3b" /> <stop offset="33%" stop-color="#232f3b" /> <stop offset="34%" stop-color="#941914" /> <stop offset="41%" stop-color="#941914" /> <stop offset="43%" stop-color="#ce1618" /> <stop offset="56%" stop-color="#ce1618" /> <stop offset="57%" stop-color="#e16c0d" /> <stop offset="71%" stop-color="#e16c0d" /> <stop offset="72%" stop-color="#f19601" /> <stop offset="84%" stop-color="#f19601" /> <stop offset="85%" stop-color="#fbc000" /> </radialGradient> <radialGradient id="gradRadialBlue"> <stop offset="0%" stop-color="#232f3b" /> <stop offset="33%" stop-color="#232f3b" /> <stop offset="34%" stop-color="#17436a" /> <stop offset="41%" stop-color="#17436a" /> <stop offset="43%" stop-color="#1a5192" /> <stop offset="56%" stop-color="#1a5192" /> <stop offset="57%" stop-color="#0d7bac" /> <stop offset="71%" stop-color="#0d7bac" /> <stop offset="72%" stop-color="#1e9ea9" /> <stop offset="84%" stop-color="#1e9ea9" /> <stop offset="85%" stop-color="#59b9b7" /> </radialGradient> <linearGradient id="noseGrad"> <stop offset="13%" stop-color="#fbc000" /> <stop offset="13%" stop-color="#f19601" /> <stop offset="23%" stop-color="#f19601" /> <stop offset="23%" stop-color="#e16c0d" /> <stop offset="32%" stop-color="#e16c0d" /> <stop offset="32%" stop-color="#ce1618" /> <stop offset="50%" stop-color="#ce1618" /> <stop offset="50%" stop-color="#1a5192" /> <stop offset="68%" stop-color="#1a5192" /> <stop offset="68%" stop-color="#0d7bac" /> <stop offset="78%" stop-color="#0d7bac" /> <stop offset="78%" stop-color="#1e9ea9" /> <stop offset="87%" stop-color="#1e9ea9" /> <stop offset="87%" stop-color="#59b9b7" /> </linearGradient> <linearGradient id="yb_1"> <stop offset="50%" stop-color="#fbc000" /> <stop offset="50%" stop-color="#59b9b7" /> </linearGradient> <linearGradient id="yb_2"> <stop offset="50%" stop-color="#f19601" /> <stop offset="50%" stop-color="#1a5192" /> </linearGradient> <linearGradient id="r2_grey"> <stop offset="50%" stop-color="#e16c0d" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="r3_grey"> <stop offset="50%" stop-color="#f19601" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="r4_grey"> <stop offset="50%" stop-color="#fbc000" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="b1_grey"> <stop offset="50%" stop-color="#1a5192" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="b2_grey"> <stop offset="50%" stop-color="#0d7bac" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="b3_grey"> <stop offset="50%" stop-color="#1e9ea9" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="b4_grey"> <stop offset="50%" stop-color="#59b9b7" /> <stop offset="50%" stop-color="#232f3b" /> </linearGradient> <linearGradient id="b1b2b3"> <stop offset="33%" stop-color="#59b9b7" /> <stop offset="33%" stop-color="#1e9ea9" /> <stop offset="66%" stop-color="#1e9ea9" /> <stop offset="66%" stop-color="#0d7bac" /> </linearGradient> <linearGradient id="b1b2b3b4" gradientTransform="rotate(90)"> <stop offset="25%" stop-color="#59b9b7" /> <stop offset="25%" stop-color="#1e9ea9" /> <stop offset="50%" stop-color="#1e9ea9" /> <stop offset="50%" stop-color="#0d7bac" /> <stop offset="75%" stop-color="#0d7bac" /> <stop offset="75%" stop-color="#1a5192" /> </linearGradient> <linearGradient id="r1r2r3r4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0