svg实现路径绘制文字字母动画效果代码
代码语言:html
所属分类:动画
代码描述:svg实现路径绘制文字字母动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html, div { background: #5677fc; margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; } #design { width: 600px; height: 400px; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } path { fill: none; -webkit-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); -o-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); -ms-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); stroke-width: 2px; stroke-linecap: round; stroke: #f5f6f7; stroke-dashoffset: 0px; stroke-dasharray: 0px 1180px; } .text path.d-1 { stroke-dashoffset: -149px; stroke-dasharray: 22px 1180px; } .text path.d-2 { stroke-dashoffset: -201.3px; stroke-dasharray: 49px 1180px; } .text path.e-1 { stroke-dashoffset: -377.5px; stroke-dasharray: 14px 1180px; } .text path.e-2 { stroke-dashoffset: -431.2px; stroke-dasharray: 43px 1180px; } .text path.s-1 { stroke-dashoffset: -526px; stroke-dasharray: 37px 1180px; } .text path.i-1 { stroke-dashoffset: -631px; stroke-dasharray: 0.1px 1180px; } .text path.i-2 { stroke-dashoffset: -637.5px; stroke-dasharray: 16px 1180px; } .text path.g-1 { stroke-dashoffset: -732.5px; stroke-dasharray: 15px 1180px; } .text path.g-2 { stroke-dashoffset: -812px; stroke-dasharray: 69px 1180px; } .text path.n-1 { stroke-dashoffset: -941px; stroke-dasharray: 17px 1180px; } .text path.n-2 { stroke-dashoffset: -1013px; stroke-dasharray: 33.5px 1180px; } /* dribbble - twitter */ .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; } .dribbble img { display: block; height: 28px; } .twitter { position: fixed; display: block; right: 64px; bottom: 14px; } .twitter svg { w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0