svg+css实现四种炫酷发光按钮悬浮箭头动画效果代码
代码语言:html
所属分类:悬停
代码描述:svg+css实现四种炫酷发光按钮悬浮箭头动画效果代码
代码标签: svg css 四种 炫酷 发光 按钮 悬浮 箭头 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> .container { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); background: rgb(9, 8, 25); } .card { position: relative; display: flex; justify-content: center; align-items: center; margin: 10px; background: linear-gradient(rgba(25, 31, 50, 0.2), rgb(4 8 20 / 0.01)), rgb(4 8 20 / 0.8); box-shadow: inset 0 0 0 1px rgb(200 200 220 / 0.16), inset 0 0 5px -3px var(--color), inset 0 12px 48px 0 rgb(160 220 240 / 0.08), inset 0 0 120px -100px var(--color); border-radius: 16px; color: var(--color); overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; background-image: radial-g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0