流光按钮
2021-06-17 本文已影响0人
张中华
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>流光按钮</title>
<style>
@keyframes animate {
0% {
background-position: 0%;
}
50% {
background-position: 200%;
}
100% {
background-position: 400%;
}
}
.colorButton {
position: relative;
font-size: 12px;
color: white;
width: 100px;
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
z-index: 1;
}
.colorButton::before {
content: '';
width: 100px;
height: 40px;
line-height: 40px;
position: absolute;
background: linear-gradient(-45deg, blue, yellow, pink, red, blue);
left: 0px;
background-size: 700%;
border-radius: 50px;
z-index: -1;
}
.colorButton:hover::before {
filter: blur(1px);
animation: animate 15s linear infinite;
}
</style>
</head>
<body>
<div class="colorButton">流光按钮</div>
</body>
</html>
知识点
- filter: blur(1px); 模糊效果
- z-index: 调整存在上下层关系的显示优先级
- animation： 动画效果
- 伪类（hover）/伪元素(before)的使用
- background: linear-gradient(-45deg, blue, yellow, pink, red, blue); 线性背景的使用
注意点
这里注意伪元素的使用，将样式设置到伪元素上，标签内只做内容显示使用。其次就是设置显示层级，将标签内元素显示层级设置成高于伪元素的显示层级，避免内容被盖住。
