css - 如何从左到右逐渐改变元素的背景颜色
问题描述
我正在尝试使用关键帧来更改 a 标签的背景颜色
我的代码:
.button-container {
width: 200px;
height: 40px;
display: flex;
margin: 0 auto;
}
.button-container a{
width: inherit;
height: inherit;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to right, #000, #000);
}
.button-container:hover a{
animation: colorswitch 5s linear;
}
@keyframes colorswitch {
from {
background-image: linear-gradient(to right, #ddd , #ddd);
}
to {
background-image: linear-gradient(to right, #ddd , #ddd);
}
}
<div class="button-container">
<a href="#">View here</a>
</div>
当我将鼠标悬停在它上面时,如何将 a 标签的背景颜色从 #000 更改为从左到右移动的 #ddd?
解决方案
这是一个使用线性渐变、背景位置和 css 过渡的模式。
右到左:
button {
background-image: linear-gradient(to right, red 40%, blue 60%);
background-size: 300% 100%;
transition: background-position .5s;
background-position: 0;
border: none;
padding: 1em;
}
button:hover {
background-position: 100%;
}
<button>A button</button>
左到右:
button {
background-image: linear-gradient(to right, red 40%, blue 60%);
background-size: 300% 100%;
transition: background-position .5s;
background-position: 100%;
border: none;
padding: 1em;
}
button:hover {
background-position: 0%;
}
<button> A button</button>
推荐阅读
- c# - 如何在到达控制器之前处理 C# 数据类型模型验证
- javascript - 如何从数组中的对象中为项目加上一个数字?
- reactjs - 使用 Material UI 的 Autocomplete 使用 Formik 在下拉列表中显示不同的值,但在 formik 状态下设置不同的值
- python - 带有 x 和 log(x) 的 Sympy 系列 - sympy.series.gruntz.calculate_series 的 logx 参数
- sql - 如何仅从 A 中选择与 B 中的给定 ID 匹配的行 - 表 SQL Server
- constants - CPLEX C++ 常量约束
- jquery - 只需要为 jquery.each 中的第一个元素添加活动类
- javascript - addEventListener('mousemove') 如何识别 ctx 对象?
- php - 在一个字符串上运行多个 php 命令的快速方法?
- node.js - 如果查询中的字段超过 3 个,Node-firebird 不会给出结果