前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
一、效果
二、原理解析
1.这是一个，按钮hover 彩色动画背景的效果。每个按钮都是由2部分组成，button元素和span元素，如下图。
1.1 button是最外层的，位置和代码。
1.2 span是里面的文字，位置和代码。
1.3 按钮组成关系。
2.当按钮上有鼠标时，hover效果触发，button元素，运行animation动画效果，改变背景和文字颜色。
3.具体的变换参数，直接看代码，可以一键复制，查看效果
三、上代码，可以直接复制使用
目录
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:#000;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
html+css 实现hover 彩色动画背景按钮</h1>
<div class="wrapper">
<button class="caiSeBg"> <span>求点赞</span></button>
<button class="caiSeBg"> <span>求关注</span></button>
<button class="caiSeBg"> <span>求收藏</span></button>
<button class="caiSeBg"> <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;
}
.wrapper {
margin-top: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
.caiSeBg {
background-color: #343a40;
height: 50px;
width: 150px;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
}
.caiSeBg span {
font-size: 20px;
}
.caiSeBg:hover {
background-image: linear-gradient(to right,
#e7487d,
#e7487d 16.65%,
#f6c31d 16.65%,
#f6c31d 33.3%,
#0bffb6 66.6%,
#0bffb6 83.25%,
#9e40eb 83.25%,
#9e40eb 100%,
#e7487d 100%);
animation: bgmove 2s linear infinite;
color: black;
}
@keyframes bgmove {
to {
background-position: 20vw;
}
}
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作