我試圖做同樣的按鈕，但不需要懸停（一直運行影片背景）。
我嘗試了不同的方法，比如使用背景剪輯、陰影等，但不幸的是沒有成功。
也許如果我使用另一個元素，如 div 和 span 可以作業，但我真的想用按鈕來做。
代碼筆
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;
}
}<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>uj5u.com熱心網友回復：
是什么讓你的::before偽元素在它沒有懸停時隱藏是opacity:0. 如果洗掉它，您將獲得所需的效果。此外，您可能想要洗掉glow-on-hover:hover:before選擇器，因為它不會有任何用處。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/342629.html
上一篇：如何用鍵盤和活動觸發按鈕