div+css实现按钮悬浮文字内容变化动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现按钮悬浮文字内容变化动画效果代码
代码标签: div css 按钮 悬浮 文字 内容 变化 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo+Mono:wght@500"> <style> /* Button */ @keyframes btn-glow { 0% { background-position: 0 100%; } 100% { background-position: 0 300%; } } .btn { position: relative; display: inline-block; border-radius: 999em; color: white; font: 500 20px/1 "Chivo Mono", monospace; letter-spacing: 0.075em; text-decoration: none; text-transform: uppercase; } .btn__inner { padding: 1px; position: relative; z-index: 2; display: block; overflow: hidden; border-radius: inherit; } .btn__inner:before { position: absolute; inset: 4px; z-index: 1; display: block; animation: btn-glow 5s infinite linear; background: linear-gradient(20deg, #00f8f1, #ffbd1e20 16.5%, #fe848f 33%, #fe848f20 49.5%, #00f8f1 66%, #00f8f160 85.5%, #ffbd1e 100%) 0 100%/100% 200%; border-radius: inherit; filter: blur(5px); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.2s linear 0.1s; content: ""; } .btn__label { position: relative; display: block; overflow: hidden; padding: 0.95em 2em 0.9em; border-radius: inherit; color: transparent; white-space: nowrap; } .btn__label:before, .btn__label:after { position: absolute; top: 0; left: 0; z-index: 2; display: block; padding: inherit; width: 100%; height: 100%; color: white; white-space: nowrap; transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s; } .btn__label:before { transform: translate3d(0, 0, 0); content: attr(data-label); } .btn__label:after { transform: translate3d(0, -100%, 0); content: attr(data-hover); } .btn__label__background { position: absolute; inset: -100px; display: block; background: #093740 url("https://assets.codepen.io/5817405/noise_2.png"); background-blend-mode: overlay; animation: noise-background 0.5s steps(1) infinite; } .btn__background { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; border-radius: inherit; } .btn__background:before, .btn__background:after { position: absolute; inset: 0; display: block; border-radius: inherit; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0