css+div实现太空星空粒子背景动画按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现太空星空粒子背景动画按钮效果代码
下面为部分代码预览,完整代码请点击下载或在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{ padding: 100px; background: black; } .btn { display: flex; justify-content: center; align-items: center; width: 13rem; overflow: hidden; height: 3rem; background-size: 300% 300%; backdrop-filter: blur(1rem); border-radius: 5rem; transition: 0.5s; animation: gradient_301 5s ease infinite; border: double 4px transparent; background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%); background-origin: border-box; background-clip: content-box, border-box; } #container-stars { position: absolute; z-index: -1; width: 100%; height: 100%; overflow: hidden; transition: 0.5s; backdrop-filter: blur(1rem); border-radius: 5rem; } strong { z-index: 2; font-family: 'Avalors Personal Use'; font-size: 12px; letter-spacing: 5px; color: #FFFFFF; text-shadow: 0 0 4px white; } #glow { position: absolute; display: flex; width: 12rem; } .circle { width: 100%; height: 30px; filter: blur(2rem); animation: pulse_3011 4s infinite; z-index: -1; } .circle:nth-of-type(1) { background: rgba(254, 83, 186, 0.636); } .circle:nth-of-type(2) { background: rgba(142, 81, 234, 0.704); } .btn:hover #container-stars { z-index: 1; background-color: #212121; } .btn:hover { transform: scale(1.1) } .btn:active { border: double 4px #FE53BB; background-origin: border-box; background-clip: content-box, border-box; animation: none; } .btn:active .circle { background: #FE53BB.........完整代码请登录后点击上方下载按钮下载查看
网友评论0