连接网络按钮动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,300); body { background: #fff; font-family: 'Roboto', sans-serif; font-size: 16px; } .source { position: absolute; left: 10px; bottom: 10px; margin: 0; color: #999; font-weight: 300; font-size: 14px; } .source a { color: #999; text-decoration: none; } .button { width: 190px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .button a { width: 180px; display: block; text-align: center; background: #4193f7; border-radius: 4px; padding: 5px; cursor: pointer; position: relative; overflow: hidden; transition: .3s all ease-in-out; } .button a .text { display: block; height: 45px; line-height: 45px; color: #fff; transition: .3s all ease-in-out; } .button a .progress { background: #4193f7; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 0; } .button.connect a { background: #e5e5e5; width: 0; padding: 5px 0; float: right; transition: .3s width ease-in-out 2.0s, .3s padding ease-in-out 2.0s; } .button.connect a .text { animation: textHeight .6s ease-in-out forwards; overflow: hidden; } .button.connect a .progress { width: 100%; transition: 1.4s width ease-out .6s; } .button.connected a { display: none; } .button .svg-button { display: block; visibility: hidden; width: 180px; height: 45px; line-height: 45px; padding: 5px; text-align: center; position: absolute; border-radius: 4px; overflow: hidden; top: 0; left: 0; transform: translate(0%, -50%); } .button .svg-button .letter { opacity: 0; color: #28e470; display: inline-block; transform: translate(0px, 5px); } .button .svg-button svg { position: absolute; top: 0; left: 0; } .button .svg-button svg rect { fill: none; stroke: #28e470; stroke-width: 2; stroke-dasharray: 0, 480; stroke-dashoffset: 480; transition: all .3s ease-in-out; } .button.connected .svg-button { visibility: visible; } .button.connected .svg-button .letter { animation: slideUp 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards; } .button.connected .svg-button .letter:nth-child(1) { animation-delay: 0.05s; } .button.connected .svg-button .letter:nth-child(2) { animation-delay: 0.1s; } .button.connected .svg-button .letter:nth-child(3) { animation-delay: 0.15s; } .button.connected .svg-but.........完整代码请登录后点击上方下载按钮下载查看
网友评论0