css - 修改 CSS 中的一些属性以使按钮阴影自动发光,而不仅仅是在悬停时
问题描述
最后我正在开发一个网站,我将在这里用 CSS 实现一个小“按钮”。我的问题是:如何让它的阴影发光而不必将光标放在它上面并悬停?我希望它的影子自动发光。我试图从下面的代码中更改一些属性,但它不起作用。有人知道该怎么做吗?任何帮助表示赞赏:)
这是我尝试修改的一些代码片段:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #000;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
解决方案
推荐阅读
- python - 重复值为 1 时出现 itertools 问题 ERROR '>=' not supported 在 'int' 和 'tuple' 的实例之间
- sql - 根据表中可用的列动态获取颜色
- linux - golang cgo - 使用 linux 为 darwin 交叉编译共享对象
- python - 使用不带 cogs 的 discord.py 是否可以实现 OOP?
- javascript - Javascript / Google Analytics - 简化 Javascript 代码
- c++ - Dev-C++:Hello World 编译失败 - Make 出错
- excel - Excel VBA Worksheet_Change 先慢后快
- c# - C#:如何解析 JSON 枚举
- javascript - 有没有办法在反应功能组件渲染之前获取数据?
- angular - Angular 10 路由