演示网站 SVG钻石样式代码
编写代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Sketch SVG Logo Hover Effect</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> <stop stop-color="#FDA700" offset="0%"></stop> <stop stop-color="#FFD71F" offset="100%"></stop> </linearGradient> <linearGradient x1="57.0207119%" y1="8.44421387%" x2="68.2533264%" y2="50%" id="linearGradient-2"> <stop stop-color="#FFDE20" offset="0%"></stop> <stop stop-color="#FEC900" offset="100%"></stop> </linearGradient> <linearGradient x1="36.884336%" y1="30.7751886%" x2="49.7067946%" y2="91.5816825%" id="linearGradient-3"> <stop stop-color="#FCA100" offset="0%"></stop> <stop stop-color="#FB8804" offset="100%"></stop> </linearGradient> <polygon id="path-4" points="77 32 77 3 99.5 32"></polygon> <filter x="-4.4%" y="-3.4%" width="108.9%" height="106.9%" filterUnits="objectBoundingBox" id="filter-5"> <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur> <feOffset dx="0" dy="-1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> <feColorMatrix values="0 0 0 0 0.991857708 0 0 0 0 0.749380648 0 0 0 0 0.166529298 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix> </filter> <polygon id="path-6" points="0 32 0 3 22.5 32"></polygon> <filter x="-4.4%" y="-3.4%" width="108.9%" height="106.9%" filterUnits="objectBoundingBox" id="filter-7"> <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur> <feOffset dx="0" dy="-1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> <feColorMatrix values="0 0 0 0 0.991857708 0 0 0 0 0.749380648 0 0 0 0 0.166529298 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient x1="57.0207119%" y1="8.44421387%" x2="68.2313877%" y2="49.9188364%" id="linearGradient-8"> <stop stop-color="#FDCD1D" offset="0%"></stop> <stop stop-color="#FECB0A" offset="100%"></stop> </linearGradient> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-9"> <stop stop-color="#FEECB0" offset="0%"></stop> <stop stop-color="#FFE171" offset="100%"></stop> </linearGradient> <polygon id="path-10" points="22 0 77 0 49.5 32"></polygon> <filter x="-1.8%" y="-3.1%" width="103.6%" height="106.2%" filterUnits="objectBoundingBox" id="filter-11"> <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur> <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset> <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite> <feColorMatrix values="0 0 0 0 0.993464768 0 0 0 0 0.978316486 0 0 0 0 0.845364511 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix> </filter> <linearGradient x1="70.4608766%" y1="0%" x2="12.2922438%" y2="100%" id="linearGradient-12"> <stop stop-color="#EC5D00" offset="0%"></stop> <stop stop-color="#FB790A" offset="100%"></stop> </linearGradient> <linearGradient x1="70.0496132%" y1="0%" x2="13.0501693%" y2="100%" id="linearGradient-13"> <stop stop-color="#EC5D00" offset="0%"></stop> <stop stop-color="#FB790A" offset="100%"></stop> </linearGradient> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="sketch-logo"> <g class="bottom" transform="translate(0.000000, 5.000000)"> <path d="M22,32 L77,32 L49.9517896,89.0471347 C49.8334843,89.2966512 49.5353059,89.4030189 49.2857894,89.2847137 C49.1815628,89.2352959 49.0976282,89.1513613 49.0482104,89.0471347 L22,32 Z" id="Rectangle" fill="url(#linearGradient-1)"></path> <polygon id="Rectangle-Copy" fill="url(#linearGradient-2)" points="49.5 0 77 3 77 32"></polygon> <g id="Rectangle-Copy"> <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use> <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use> </g> <g id="Rectangle-Copy" transform="translate(11.250000, 17.500000) scale(-1, 1) translate(-11.250000, -17.500000) "> <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-6"></use> <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use> </g> <polygon id="Rectangle-Copy" fill="url(#linearGradient-8)" transform="translate(35.750000, 16.000000) scale(-1, 1) translate(-35.750000, -16.000000) " points="22 0 49.5 3 49.5 32"></polygon> <g id="Rectangle" transform="translate(49.500000, 16.000000) scale(1, -1) translate(-49.500000, -16.000000) "> <use fill="url(#linearGradient-9)" fill-rule="evenodd" xlink:href="#path-10"></use> <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use> </g> <polygon id="Rectangle" fill="url(#linearGradient-12)" points="77 32 99.5 32 50 89"></polygon> <polygon id="Rectangle" fill="url(#linearGradient-13)" transform="translate(24.500000, 60.500000) scale(-1, 1) translate(-24.500000, -60.500000) " points="26.5 32 49 32 0 89"></polygon> </g> <g transform="translate(0.000000, 5.000000)" fill="#FFFFFF"> <path d="M22,32 L77,32 L49.9517896,89.0471347 C49.8334843,89.2966512 49.5353059,89.4030189 49.2857894,89.2847137 C49.1815628,89.2352959 49.0976282,89.1513613 49.0482104,89.0471347 L22,32 Z" class="top"></path> <polygon class="top" points="49.5 0 77 3 77 32"></polygon> <polygon class="top" points="77 32 77 3 99.5 32"></polygon> <polygon class="top" transform="translate(11.250000, 17.500000) scale(-1, 1) translate(-11.250000, -17.500000) " points="0 32 0 3 22.5 32"></polygon> <polygon class="top" transform="translate(35.750000, 16.000000) scale(-1, 1) translate(-35.750000, -16.000000) " points="22 0 49.5 3 49.5 32"></polygon> <polygon class="top" transform="translate(49.500000, 16.000000) scale(1, -1) translate(-49.500000, -16.000000) " points="22 0 77 0 49.5 32"></polygon> <polygon class="top" points="77 32 99.5 32 50 89"></polygon> <polygon class="top" transform="translate(24.500000, 60.500000) scale(-1, 1) translate(-24.500000, -60.500000) " points="26.5 32 49 32 0 89"></polygon> </g> </g> </g> </svg> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
