本文链接：https://blog.csdn.net/weixin_66918384/article/details/126103262
实现效果
html
-
-
-
CSS
*,*::after,*::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
color: #efe;
background: #182848;
display: flex;
justify-content: center;
align-items: center;
}
button{
border: none;
position: relative;
border-radius: 10px;
/* 鼠标改成小手 */
cursor: pointer;
background: #182848;
padding: 2em 4em;
font-family: sans-serif;
}
a{
text-decoration: none;
/* 作用是把一个值限制在一个上限和下限之间 */
font-size: clamp(1.5rem,2.5vw,2.5rem);
/* 渐变 */
background: linear-gradient(-45deg,#ff00c1,#00fff9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
button::after,
button::before{
content: '';
position: absolute;
background: linear-gradient(
var(--rotate),
#ff00c1 0%,
#9600ff 25%,
#4900ff 50%,
#00b8ff 80%,
#00fff9 100%
);
width: 105%;
height: 110%;
left:-2.5%;
top:-5%;
border-radius: 10px;
z-index: -1;
transition: --rotate 9999s linear;
}
button:hover::after,
button:hover::before{
--rotate:3600deg;
transition: --rotate 20S linear;
}
button:hover::before{
animation: fade 1.2s;
}
/* 允许开发者显式地定义他们的css 自定义属性 */
@property --rotate{
syntax:"<angle>";
initial-value:130deg;
inherits:false;
}
@keyframes fade{
0%{
opacity: 1;
transform: scale((1));
filter:blur(10px);
}
100%{
opacity: 0;
transform: scale((1.4));
filter:blur(10px);
}
}
