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