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 { positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0