流动
边框按钮的实现方法多样，以下为几种不同的实现方式及示例代码：
### Clip-path 实现方式
实现步骤如下：
1. 添加 div 标签，设置其基本样式，如位置、尺寸、颜色等。
2. 为伪元素添加 inset 属性，设置其位置。
3. 为伪元素添加动画效果，实现 clip - path 的变化。
示例代码：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip-path
按钮流动
边框</title>
<style>
div {
position: relative;
width: 220px;
height: 64px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 20px;
background: #55557f;
cursor: pointer;
border-radius: 10px;
}
div::after,
div::before {
content: '';
position: absolute;
left: calc(110px - 120px);
top: calc(32px - 42px);
inset: -10px;
}
</style>
</head>
<body>
<div>苏苏_icon</div>
</body>
</
html>
```
此代码参考了引用[1]和引用[5]的内容。
### 纯
CSS 实现彩虹
边框动效方式
特点与实现步骤：
1. 采用统一圆角 + 内边距构建柔和
按钮样式，使用 flex 布局方便后续添加图标、loading 等元素。
2. 利用 transition 实现平滑过渡。
3. 实现鼠标悬停效果（内外联动），包括
按钮向上浮动、背景色加深、外层
边框加速流动和发光增强。
4. 定义 @keyframes gradientShift 实现背景滑动动画。
示例代码：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯
CSS 彩虹
边框动效
按钮</title>
<style>
.rainbow-button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8);
background-size: 300% 300%;
cursor: pointer;
transition: all 0.3s ease;
}
.rainbow-button-inner {
padding: 10px 20px;
background: #fff;
border-radius: 5px;
transition: all 0.3s ease;
}
.rainbow-button:hover .rainbow-button-inner {
background: #7c3aed;
transform: translateY(-2px);
}
.rainbow-button:hover {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
animation: gradientShift 1s ease infinite, glow 3s ease-in-out infinite alternate;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes glow {
0% {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
}
</style>
</head>
<body>
<div class="rainbow-button">
<div class="rainbow-button-inner">
按钮</div>
</div>
</body>
</
html>
```
此代码参考了引用[2]的内容。
### Less 编写实现方式
实现步骤如下：
1. 设置
边框距离和颜色等变量。
2. 定义动画，使
边框旋转。
3. 使用伪类元素实现流动
边框效果。
示例代码：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Less 实现流动
边框按钮</title>
<style>
@w: 2px;
@color: rgb(104, 253, 114);
@keyframes moving {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
button {
position: relative;
cursor: pointer;
margin: 100px auto;
background: transparent;
height: 50px;
width: 130px;
border-radius: 10px;
font-size: 18px;
overflow: hidden;
color: rgb(244, 194, 76);
border: 0;
}
button::after,
button::before {
content: '';
position: absolute;
}
button::after {
border-radius: 10px;
width: calc(100% - 2 * @w);
height: calc(100% - 2 * @w);
left: @w;
top: @w;
background-color: white;
z-index: -1;
}
button::before {
animation: moving 1s linear infinite;
transform-origin: left top;
left: 50%;
top: 50%;
width: 200%;
height: 200%;
background-color: @color;
z-index: -2;
}
</style>
</head>
<body>
<button>点击
按钮</button>
</body>
</
html>
```
此代码参考了引用[3]的内容。
###
CSS 实现方式
实现步骤如下：
1. 创建一个 div 元素作为
按钮，设置其基本样式。
2. 使用伪元素 before 和 after 来实现
边框和背景。
3. 定义动画，使
边框旋转。
示例代码：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
CSS 实现流动
边框按钮</title>
<style>
.btn {
width: 55px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #ccc;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.btn::before {
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 50%;
top: 50%;
z-index: -2;
background-color: #000;
transform-origin: 0% 0%;
animation: line 2s linear infinite;
}
.btn::after {
content: "";
display: block;
width: 95%;
height: 95%;
position: absolute;
left: 50%;
top: 50%;
border-radius: 5px;
transform: translate(-50%, -50%);
z-index: -1;
background-color: #ccc;
}
@keyframes line {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="btn">
按钮</div>
</body>
</
html>
```
此代码参考了引用[4]的内容。
这篇博客展示了如何利用CSS伪元素`::before`和`::after`创建一个带有旋转边框效果的按钮。通过设置动画和定位，使得边框在按钮周围动态旋转，实现了视觉上的独特效果。示例代码详细解释了每个样式属性的作用，帮助读者理解并应用到自己的项目中。
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
