html+css 实现hover边框彩色流动

news2025/1/24 2:24:50

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

文章目录

效果
原理解析
- 1.每个按钮都是由4部分组成，==button,button:before,button:after,span==如下图。
- - 1.1 button是==最外层==的。
  - 1.2 button:before是关键的==彩色背景==。
  - 1.3 button:after是==在button:before上==的，背景是黑色盖住大部分主要内容，留了一边==四周彩色==。
  - 1.4 span是文字在==最上层==。用来显示按钮的文字。
  - 1.5 按钮组成关系。
  - 1.6 没有hover时，button:before的不透明度 opacity: 0;
- 2.具体的变换参数，直接==看代码==，可以一键复制，查看效果
上代码，可以直接复制使用
- 目录
- html
- css

效果

实现hover边框彩色流动效果展示

原理解析

1.每个按钮都是由4部分组成，button,button:before,button:after,span如下图。

每个按钮的组成

1.1 button是最外层的。

button组成

1.2 button:before是关键的彩色背景。

button:before组成

1.3 button:after是在button:before上的，背景是黑色盖住大部分主要内容，留了一边四周彩色。

button:after样式

1.4 span是文字在最上层。用来显示按钮的文字。

按钮span文字样式

1.5 按钮组成关系。

按钮组成关系

1.6 没有hover时，button:before的不透明度 opacity: 0;

hover时 opacity: 1

/*当hover时*/
.butBorderColor:hover:before {
  opacity: 1;
}

2.具体的变换参数，直接看代码，可以一键复制，查看效果

上代码，可以直接复制使用

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html+css 实现hover边框彩色流动</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
        html+css 实现hover边框彩色流动</h1>

    <div class="wrapper">
        <button class="butBorderColor">
            <span>求点赞</span>
        </button>
        <button class="butBorderColor">
            <span>求关注</span>
        </button>
        <button class="butBorderColor">
            <span>求收藏</span>
        </button>
        <button class="butBorderColor">
            <span>求转发</span>
        </button>

    </div>
</div>

</body>
</html>

css

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root
{
  --btn-bg-color:#fff;
  --font-color-black: #000;
  --btn-bg-color-hover: #FF5833;
}
.container{
  min-height: 100vh;
  background-color: #0e1538;
}
.wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:40px;
}

.butBorderColor {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.butBorderColor: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 0.3s ease-in-out;
  border-radius: 10px;
}

.butBorderColor:active {
  color: #000;
}

.butBorderColor:active:after {
  background: transparent;
}

.butBorderColor: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;
  }
}
/*当hover时*/
.butBorderColor:hover:before {
  opacity: 1;
}