css实现炫酷按钮边框动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现炫酷按钮边框动画效果代码,鼠标悬浮背景变色。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root{font-family:sans-serif} *,:before,:after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { display: flex; text-align: center; font-family: 'Roboto', sans-serif; background-color: #011c37; background-size: 5px 5px, cover; } .comet { position: relative; display: block; margin: auto; padding-right: 2rem; padding-left: 2rem; font-size: 1rem; font-weight: 900; line-height: 4rem; text-transform: uppercase; letter-spacing: 6px; color: #011c37; background-color: rgba(41, 255, 106, 0); background-image: linear-gradient(150deg, rgba(41, 255, 106, 0.2), rgba(41, 255, 106, 0.1)); background-size: calc(100% - 15px) calc(100% - 15px); background-repeat: no-repeat; background-position: center; cursor: pointer; user-select: none; box-shadow: 0 0 0 1px rgba(41, 255, 106, 0.1), inset 0 0 0 1px rgba(41, 255, 106, 0.1); transform: translateZ(0); transition: transform 0.1s, } .comet:hover { padding-right: calc( 2rem - 10px); padding-left: calc( 2rem - 10px); background-size: calc(100%) calc(100%); line-height: calc( 4rem - 15px); background-color: #29ff6a; box-shadow: 0 0 15px 1px rgba(41, 255, 106, 0.4), inset 0 0 0 1px #29ff6a; transition: transform 0.1s, } .comet:active { transform: scale(0.9); } .comet:before, .comet:after { content: ''; position: absolute; top: 0; left: 0; height: 4px; width: 4px; background-color: #29FF6A; animation-name: comet; animation-iteration-count: infinite; animation-play-state: running; animation-timing-function: linear; animation-delay: -0.3; border-radius: 50%; opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); transition: all 4s; } .comet:before { animation-duration: 2s; } .comet:after { animation-duration: 2.5s; } .comet:hover:before, .comet:hover:after { opacity: 0; filter: blur(2px); transform: translateX(-50%) translateY(-50%) scale(2); box-shadow: 0 0 15px 1px #29FF6A, 0 0 2px rgba(41, 255, 106, 0.7), 0 0 2px rgba(41, 255, 106, 0.5), 0 0 2px rgba(41, 255, 106, 0.3), 0 0 1px rgba(41, 255, 106, 0.25); transition: all 0.7s; } @keyframes comet { 0% { top: 0; left: 0; box-shadow: 0 0 15.........完整代码请登录后点击上方下载按钮下载查看
网友评论0