div+css实现按钮悬浮背景翻页动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现按钮悬浮背景翻页动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ background: black; padding: 100px; } .btn-31, .btn-31 *, .btn-31 :after, .btn-31 :before, .btn-31:after, .btn-31:before { border: 0 solid; box-sizing: border-box; } .btn-31 { -webkit-tap-highlight-color: transparent; -webkit-appearance: button; background-color: #000; background-image: none; color: #fff; cursor: pointer; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 100%; font-weight: 900; line-height: 1.5; margin: 0; -webkit-mask-image: -webkit-radial-gradient(#000, #fff); padding: 0; } .btn-31:disabled { cursor: default; } .btn-31:-moz-focusring { outline: auto; } .btn-31 svg { display: block; vertical-align: middle; } .btn-31 [hidden] { display: none; } .btn-31 { border-width: 1px; padding: 1rem 2rem; position: relative; text-transform: uppercase; } .btn-31:before { --progress: 100%; background: #fff; -webkit-clip-path: polygon( 100% 0, var(--progress) var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0