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,iVBORw0KGgoAAAANSUhEUgAAAEYAAAC0BAMAAADbWkelAAAAGFBMVEXz8/P6+vrr6+vi4uLZ2dmZmZnKysq1tbUXowHDAAAACHRSTlPr99zOvQGidanZQocAAAwNSURBVFjDhJhLVxs7FoVVMkmmVQ6BqZBMemokQU9ZJVGZJrw8zcVCnva9QPnv996STZOCtdokxFBfts7R0XnI4u7/v8Sb9+NZx1fbdN33lw+ZZz6WSpvorHOLuHnP/NW1nRLCOGfx1/n88H3KnHVaNELMNQnrjB2yW/zJ/N0KIST+SGlMjM4Fk5P9/Ja5bRtCohVSO+N8DN4NKdjzN4xVhcE3aa02ZGJM0bv/MT8tkaaBX9pYa/wwuIiXd6evjLGdwGotGKwUtI1DcDHBPbtnrp2mCL6E0kJjNZ8ShFxw7nHH9E433OCmk1bTZq1DgFFkTiuzMs4Wpm1nPg7JmUsphfaDW4Q4VObGLZYQgTXaJfgTFDYTMfHBhBgq8491oqOQNAO9iUsl1Mx477T368fCJG9FUwLqMwj8XyH0goJg4nllghJcq4WZRHxcauUG7A7Jfxcm96YpOtr6ELAxIWgnhxSjRegimVWymlvcwVADb7EWvNbQdGR8YYA38KpjQD1OjudjTQnLn8ncR62LzULMsA6FsEd4jPdg7AuY28i1GtFIcZCi6y2MxvJ6EWOvsXhhklU4FVzpIsdg1NzzqXJlxWAfwYzZapyuTmjtN/Hy8e73IqWgaVDQ0lcmaUsdCflk/oW9f4q0hwyNviIzkmnAqINwcsWTG/Naa2V8b6WxZLajx1GF0UrOgmLurTzdFtpRDWcazLN3StBmYXIoB3gYwCgJx60uzAimOC/1QR4Kw7CRiWBc1XFMCxx6bd4yujCyMk/QbXGWkX7Dj8IkbrFWgTr6lAx9aKmj9HBVmLXzfAodo3TRWeNdy7ALc/FYGR8cmQFPTGEQRvhOIen3OnRbLYZe672OVVysbekEX0+vjNHyaq+jYDMMqrl79wwGRi8yvNMlFig2ms7Ds8WnyqCQwegFQmv3OiXwFJKfXnV0OYrYpbLPwVglRbF5VpkxcjE7Q9is4v6MvbPI3aKzY7ZhAaY3Q9jrgEFiChYp863q4JBxOYafvq9GbgJrIYTMcWU2CTUj6hLUqqOVlhXSXyqzXSMXnb7gEdnrYC1uo5CV2W5RM6Fzkepad7u16Fmr9wwC7731qTeM12pbGGwyjpk4qsyIA4Ta4pkfhQkaXsEehvXoVQcp3YOpOuMaDDdQdG91oovWZ1hedaBSjvwrk7kWqsdiBIN4rTKiLmiLQOeqTI8CBSb6seogXqp2AX6rzMPASjf4xQj/qDNGHrCmtIvmsJ7D6KgT/Jh2jF+Wleh80+50sDthCD6nHpUezNDDYiVhVLdjerSLwC3KKZqik3uKoLtBrqtMLvUwkal+bXoWBMQMzlcmbAJKbAyLPPhQdDYPeCw0o7pnMg8iGLSfUn9SXiuWXe6A7EpfDyydzrvSWSsT6JWBTiNPymHt+Qzuk/GFGYrOAlafiLPjqlMOPXLD1X3OF4n2LCyKXafbWltCSQxp0PBKDkYwqCtWSw3HWBWCYtUXteUzd1KKlvZYpfVJ13zbTxArFK84bLbsBc8osYpraS7WzT+abZ58YQ6Y/w4N6OoD5jr2rKszZqtRTXf8AXPjUUNFM3OopJod8eU9szI49F03Q7opVvzu2wez1ixotDjJqs0k6roPGB35v+coEYislt07ITC/o1WYETSqIoRk884iML8WlvsqqVOt/vKOuZ5xrZYnCGMG97F9mTKrOfoFGFUCRGayR5xt5iirXIylTJf383fMX7rMP6IEu77/NGWupZJ1/ukEtwjv5lPmvuPvMU0gv9Ahl3jzR2TLzIb231SIja4MVV+nzN8sLBzI0J0x/ZVR53HC3LSiMF2Z7NAgoXQ0nY13i5Vc1MaJ5R8WVeZvUYRQF3BgjV9q/HA4YVYtbejmjlE1EYMVHDifzM9VqPWcIZ1fGy7WTmfsuaChBtM1mKgDHTifMP9B1Ntu3jM//XDpqHo4necxpOD3HOUxHD2YUtUeJ8zN2kFohoENE2IyS44pn6d3h+h72czLpB69Rj618ux8er9IqREYsnG1iN5G7JVURxNmNeRL0RWhEJdRoRop8TK5y4xDEidtsRklE2Wtc/Z0wqxyPqMQSrOzB7C5M72c3omeUamb1mDgdcYscboRm8cJcx8TdmXGruSWwGVrzNWEuVsPPQcc6ixZ2xqp+ylzPyTk6QwTkjGGbahV4XHC3EW432BWY9kVmHc64U+nzO0mYK8x7Bq9KIxcfp4yd0NG25QYa4wpQ3Wr5++Y2w3dV7xiXaISd3N2mQlzNzwz39lj+tkJk7t7fMfc576peR8kq4zqTt8xd0M6KXkm6VjXLVH53jH34++u3BH8GVeVHzF3m3RSmSWzQLbHHzDb7WURWpSUluIQ/XTYbndRz5lH6maTCmMsCkU7RzsXt3KIeJoj+rUtdfBiywxsFnAM2XTS3Il7vxm3+Bq3OafjOo09sBbNQrlHkrm9yGmbxw211sd1r9cwpJFRzbmd3Yu4Hca8GTfb7XbMqeTB6sdzKRDRSm5VdyVuYM2Yc9HJB3VEel7yTgvHuNPNFXUixoo0DEPOs8ok3nvbynTNubj9MQ55iLgtQscU5vKhp84M3Zz1/xMZWI0ZLQ2bja81xD6AacAozl+n4mazHtC+B1wp86Zcj+9+WZQQUFYYGK3B/FjjFh55RRxyX5ifuuddC22E0cBa1wNvHGQwXVXm+mtfkkKX2ia+FaZcMjl8Vub+MHB25wAGRn8RNxk+9ciXYM2e+RpOWPShg3/FF/Gc19Bhclo7q1ei28O+XOcr0x6L+xySW0qHWqEP6pXo9mvgdRVNj0xzLEacCgsGNwhz8X2/lip9Ssy50UecMxN+cLyZ5j1jd5daBqM5pE5iamJqXKyP9jqlDSEcCIY4gj3UkQZ1YNEfvjKlMTZyCdvJuLRs59Sx6uCPtZAcYMRh0cG1AFUZN6WdThtO6idBbGsKTAq8jTh+fCCPdp++VHv4cRAa34EY123o7RLVFMNWZa7nfVmL2dW1y8/iH9e6okOmNoifYEqbLjpgnnSL6sfPj9ye+TVfU6fhPRLMkVhr6uyYutavr2T4EU2rChPAaDLmDfOkqk4L1B6LoMCgWv+3LrPZThsGovDYuO3WBk7XRnKTLZEN69Q2XhNyUh4grtg2LT+v33tHToA09YYDfIzGkqy5d7iIs5mS0ThAwTw7MLk4tZvJsDf2FC9saDDOF2nJSBjLBuZxunccCCsGLdd8Ugb6wFzE2Uz3EKVpiDNpb8EIrDDyccgnPKfraV/S3Wg+k/ab9HOKDeTj3uI8fO3dHBDWCiKnXYh3QiHG4n/FoLZinsF0C+kc9n/6Txx6UVSCKJuC8YZO512co8aJyEz8QiqHfETg2sAUF/nwKqMs6VbS1sqEsT6f46igJONX8qeBvpKYTGnCc/GS9EaZURNlBfJ5LtmRAFNjnpeh3XjFIJ8GZ9awXjDRod+YsKzytAOz9D8RB9KZcXBfNrRSsuQeaggTrUx3AIPjI49Di7JWxZONsXmHONJ5MBgrJsP5qSjTN9kIgelZwcS9f5LfiAcJjjiFs2YG5nvwOqgDVR2NBoZG+N6aCmftbHy6G/wQXopaLJlfiAPG2bzUs5ZnQapNgSy1tSm63ZOscdbgwbbQjkMWyhBJy9pWHeryuiQjBRhIftX0TAY7IxtXzt2Q2VRkMgoD+oI8NCi4USk7y5vugPplDZMu+XAMcTQdVie4rgb1U7ZwJvDUVneV0ThRUMGI00J3UUuIoaVWXxFsSKRjaZWDmvRkciaov5RIeyF8R9mfjVGy/I7My3CrekhyLTUlvh2hqO1UR61hk1P9UO23aN9AmQJlYnfQHmOsIpwfR0LvJNoe5m31LYeilogjo19wfuOB0YOu8p0qB3q0mXaIdAni13kGYsD0A/NoJnmko9Ffpeyt8xgzFMndqxadmNAFYc653hwGxipXTeiXkXmA68Bkx/OUTMYlSWNq7ap908/bsZ2hENMwGhWOPI4oo4d2mYTDVvdmbbnLOD04sdijdocLHT5jE7LoHZuNSJqtWEQxqysvg8fHdkdUVo2hXYk2v732Fz9Stuf86ajf6uWS915me5cuKYJ2WCPf+77Jz39PnHUdJE5QStBmjekOH//HsQVy6sEMSu8j5n/XX+xR2o3oTaOYAAAAAElFTkSuQmCC"/>
<image id="char_a" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAC0BAMAAADbWkelAAAAGFBMVEX4+Pjx8fHq6urh4eH+/v6Xl5fQ0NC1tbXvtTrCAAAACHRSTlPz59vL/QGsdMYsDjoAAAixSURBVHgBldnJd9s4Esfxgox+c0VBbucqFBLn2gJi5gq/4T2rrGvHtKhjr5L//fkBIKl1NvTe+eRbJZLeafXfz/9lXrev+Nt41utr5mn7+toFCc7GGCXGvr80a/zuvu+b2PRdj4PshcmoR0Gij7EBumLWO5iuE/FSzHZ/pVNMFAsVYzfOutwnPgsLTuyvm/Xrvu8jc0Yew/ZXOyDZOIZBZ3dhMKp2gLAROtdN7TA6Hi9+c838FZtQjC0LPVwzyIxGmr55d8X0ffBuNDHG9xdmu99HGMcKCJ3YfLzswEgUMawUl6t4xfR9MWzY1E5zbnCVOy/RicsdK7G7NOj8VTp5a2X9NbPe77tgRZjHToyXs/pOMItxTJ0VrnaiFFIvdPN8afrnII4JRimYvumuzIoiYgjHKBbpm/7KrCgBRilCS3xs9rvLTigmHwUUm/6qEaHSgbHOx3ODN9JDh2CY/UVnDyPC4yzH6u7c4FkOHIR5MDh3mwvTFWNI1Y7h+cOZ6WFEolPDPijOzzvbfSciYTT2mnndR2fFu7qPYusuzb6YuDCqoOudvnQWxtSOOHe5TzHRscohwwjZM7MeOo7NdBXl45nZ9x4miEKnhpw9N/kSlg6TqiGrzs32YErHGMXNRUeYMWswpIyyZ+ZpD4OOODZag1wadGLuOO8MJfxBvLhmHCMkzpYOsSM+n9UHGJRk/pYoFTN7vzs1XeDBfBg6St2fGzHl0sndB3SSYlZ8d2r20Zl8iavRpNBhe2YC6/oGev8CkgAU329OTLekVuvcefNSO5bp7tT0TretJgPz93C7DM12px3WLeGwvIPJO4tR81MTXZuNqQaWvVP2xKw7aYfOw/c6Sgyrs1lLGCajbTEEs1C8Oe04GAslg8n78PbULNo2wSjZfB5el7tmDCunQjZ6MB9PjSk7sw2bL6ouv6TZhUlECWb3bXgDW551Vp3RLSXK5mnsKHfe0WPnaexY1xybp47apIl4vlw9MeHMxLG9NJSNW62VLm8552ZdjIYRGGCjOFyY1IKQ8sUkRbNidsfmOdVZ3q9WbOqNZ74/NvvJ3K3WTAjCGPanhlpKqZgVaw3NwqfmaUnowIR/rFb2Fh0Fo+zmuPOLQkczhzerlVvUJ9LQiemXj/kacuk4AwLj1JlJeR/m5U8wXDt82nk2us0rs8AsmZSi3JGPR+YXDdPChHfZaDJKWUd2e2RIj48GPtb8YCJ0LPY56qwfNVDeWbJxJik1vpeajMoEO1sH82t5YYqdOjGO6j5W8Ep+Z0OJx4djNE8Gpm0VW18ME2VjjjvfWI8Gd+izZeLSUUfmq6Ej853ZWFXM/e7QManFwc4xd4QNKcXOkN8ddVJBJ8bCzA/mc+nASJf/y06d2cH8bbTORvliGI.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0