svg文字渐显动画效果代码
代码语言:html
所属分类:动画
代码描述:svg文字渐显动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body, .bg { width:100%; height:100%; overflow:hidden; background:#000; } div, svg { position:absolute; } .bg { background:url(//repo.bfw.wiki/bfwrepo/image/5fd8b1d9c228b.png) center; background-size:cover; } svg { width:100%; height:100%; max-width:1080px; top:50%; left:50%; transform:translate(-50%, -50%); } </style> </head> <body > <div class="bg"></div> <svg viewBox="0 0 1080 400" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"> <defs> <g class="satruday"> <image id="char_s" xlink:href="data:image/png;base64,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"/> <image id="char_a" xlink:href="data:image/png;base64,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"/> <image id="char_t" xlink:href="data:image/png;base64,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" /> <image id="char_u" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAC0BAMAAADFk3cWAAAAGFBMVEXx8fH8/Pzq6ur39/fe3t6Yl5jOzs61tbXiVlerAAAACHRSTlPn+dvyxgGodZFMhr0AAAjTSURBVHgBldi3miWHUgDgf6onw53R3HRapdYSaujVSbHzzacQvyneZHh0HwbPC/AAeDLMXDW76VWrtgdvj1YJruvI4D38afm0PPs/iIhpuvrUNGVMCTB95mr6BH7s/j4/S7q+vL8bvvKzyu975/umi6vPXF9f/eQz7/7g990/+SQ/pnfe/YH77/8s6d0fePedu+kTpun+7iefRZ+rW1dzakD/2mmUNNYitFUDFPgLSinWtZqIQEFbGwDkRvYjYW1otA2gSUZqRsiwKpANhLBt1mu4JWgAATgAzHASKpiZKQloUgOImjxaWKgq4K+qq0dHsBzE2HZg7TWAoSu3sjNgEVGNAd0aoCsZvNiZf0MQBjsiRAEqqd1bhkGKmtpugNIJmJAvMENoDDu5tgDMjbIPdBENO9AKWNAMZpsUsTEwQ3UCAmYGY5bokX2wgAJqRtC1sx1chmIPyJcN5K/eZ+VLW1K5ZEAEqACAdV/SYpKi0Q1ynwHoouw6UgQyQSkAVRh.........完整代码请登录后点击上方下载按钮下载查看
网友评论0