提示：鼠标悬浮即可得到效果，话不多说上才艺
前言
实现效果如下图：鼠标悬浮，按钮开始变化流光展示炫酷效果
提示：以下是本篇文章的代码内容,供大家参考,相互学习
一、html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>流光按钮</title>
<link rel="stylesheet" href="../css.css">
</head>
<body>
<a href="#">button</a>
</body>
</html>二、css代码
*{
/* 初始化 取消页面的内外边距 */
margin: 0;
padding: 0;
}
body{
/* 弹性布局 让页面元素水平、垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置body高度为100%窗口高度 */
height: 100vh;
background: #000;
}
a{
/* 相对定位 */
position: relative;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
color: #fff;
/* 渐变背景 */
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
/* 背景渐变色大小 */
background-size: 400%;
/* 圆角 */
border-radius: 50px;
z-index: 1;
}
/* 发光效果 */
a::before{
content: "";
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
/* 渐变背景 */
background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
/* 背景渐变色大小 */
background-size: 400%;
/* 圆角 */
border-radius: 50px;
/* 位于按钮之下 */
z-index: -1;
/* 设置模糊度 显示发光效果 */
filter: blur(20px);
}
/* 鼠标移入执行动画 */
a:hover{
/* 动画：名称 时间 infinite是无限次播放 */
animation: streamer 8s infinite;
}
a:hover::before{
animation: streamer 8s infinite;
}
/* 接下来定义动画 */
@keyframes streamer{
100%{
/* 背景位置 */
background-position: -400% 0;
}
}总结
-
通配符选择器 * 在CSS中，通配符选择器 * 可以匹配所有的元素。这段代码中使用 *{} 设置了所有元素的 margin 和 padding 属性为0，以取消默认的内外边距。
-
弹性布局 display: flex; flex 是一种流式布局方式，使用 flex 布局可以快速地实现水平和垂直居中。这段代码中，设置了 body 的 display 属性为 flex，并使用 justify-content 和 align-items 属性来控制其内部元素的水平和垂直方向的对齐。
-
相对定位 position: relative; 相对定位是指元素相对于其自身的初始位置进行定位。这段代码中，a 元素使用了相对定位，以便在其内部使用 ::before 伪元素实现发光效果。
-
渐变背景 linear-gradient() linear-gradient() 是一种CSS渐变样式，可以实现从一个颜色到另一个颜色的平滑过渡效果。这段代码中，使用了 linear-gradient() 实现了渐变背景，并通过 background-size 属性设置了背景的渐变大小。
-
圆角 border-radius border-radius 属性可以设置元素的圆角大小。这段代码中，使用了 border-radius 设置了按钮的圆角大小。
-
z-index 属性 z-index 属性用于控制元素的层级关系。具有更高 z-index 值的元素将位于具有更低 z-index 值的元素之上。这段代码中，通过设置 a 元素的 z-index 为 1，使其位于 ::before 伪元素之上。
-
动画 animation animation 属性是一个复合属性，用于定义动画效果。其中包含多个子属性，例如动画名称、动画持续时间、动画播放次数等。这段代码中，定义了名为 streamer 的动画，并使用 animation 属性将其应用于 a 元素和 ::before 伪元素。在鼠标悬停时，动画将开始播放，背景颜色会以循环方式平滑地从一个颜色到另一个颜色变化。动画的关键帧（keyframe）使用 100% 来定义，表示当动画执行到 100% 时，背景颜色将移动到最右侧，实现渐变背景的循环效果。
906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
