svg+css实现发光的奖牌效果代码
代码语言:html
所属分类:其他
代码描述:svg+css实现发光的奖牌效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> svg { /* position:relative; */ height:150px; width:150px; /* border:1px solid red; */ } body{ background:#224; } .box { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; } </style> </head> <body translate="no"> <div class="box"> <svg id="gold" viewbox="0 0 100 100"> <path d="M0 0l33 33h20l-10-33z" fill="blue" /> <path d="M100 0l-33 33h-20l10-33z" fill="#33f" /> <g fill="gold" transform="translate(0 15)"> <clipPath id="medalMask"> <circle cx="50" cy="50" r="35" /> </clipPath> <circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" /> <circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" fill="#000" opacity="0.2" /> <path clip-path="url(#medalMask)" d="M -10 90 L 0 100 L 100 0 L 90 -10" fill="#fff"> <animate id="shine" attributeName="d" values="M -10 90 L 0 100 L 100 0 L 90 -10; M 50 150 L 60 160 L 160 60 L 150 50" dur="1s" begin="0s;shine.end+5s" fill="freeze" /> </path> <path clip-path="url(#medalMask)" d="M 0 0 V 100 L 100 0 Z" /> <path clip-path="url(#medalMask)" d="M 0 0 V 100 L 100 0 Z" fill="#fff" opacity="0.2" /> <circle cx="50" cy="50" r="30" /> <text x="50" y="52" dominant-baseline="middle" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="30" font-weight="bold" fill="#000" opacity="0.3">1</text> <!-- shine --> <path clip-path="url(#medalMask)" d="M 40 140 L 50 150 L 150 50 L 140 40" fill="#fff" opacity="0.8"> <animate attributeName="d" values="M 40 140 L 50 150 L 150 50 L 140 40; M -60 40 L -50 50 L 50 -50 L 40 -60" dur="1s" begin="0.5s;shine.end+5.5s" fill="freeze" /> </path> </g> </svg> <svg id="silver" viewbox="0 0 100 100"> <path d="M0 0l33 33h20l-10-33z" fill="blue" /> <path d="M100 0l-33 33h-20l10-33z" fill="#33f" /> <g fill="silver" transform="translate(0 15)"> <clipPath id="medalMask"> <circle cx="50" cy="50" r="35" /> </clipPath> <circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" /> <circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" fill="#000" opacity="0.2" /> <path clip-path="url(#medalMask)" d="M -10 90 L 0 100 L 100 0 L 90 -10" fill="#fff"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0