div+css实现科技感按钮悬浮动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现科技感按钮悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:300,400,800'> <style> * { box-sizing: border-box; } html, body { height: 100%; } body { padding: none; margin: none; font-size: 18px; font-family: "Raleway", sans-serif; background-color: #262626; } a { text-decoration: none; float: left; } .wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .wrapper .container .btn { width: 200px; height: 40px; margin: 0 20px; color: #257F7F; text-align: center; font-size: 80%; line-height: 38px; text-transform: uppercase; position: relative; display: block; border: 1px solid #257F7F; transition: 300ms ease; } .wrapper .container .btn:hover { color: #97FFFF; border-color: #97FFFF; background-color: rgba(37, 127, 127, 0.25); } .wrapper .container .border { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .wrapper .container .border .line { position: absolute; fill: none; stroke: #257F7F; stroke-width: 1px; transition: all 500ms ease-in-out; } .wrapper .container .border .line.left { stroke-width: 3px; stroke-dasharray: 200 100; stroke-dashoffset: -50; } .wrapper .container .border .line.center { stroke-width: 3px; stroke-dasharray: 100 200; stroke-dashoffset: -50; } .wrapper .container .border .line.right { stroke-width: 3px; stroke-dasharray: 200 50; stroke-da.........完整代码请登录后点击上方下载按钮下载查看
网友评论0