jquery - h1 元素的动画背景
问题描述
即使包含 jQueryUI 或尝试更改为简单颜色(例如'red'
,而不是linear-gradient()
.
$('#the-button').click(function() {
$('#something').animate({
background: "linear-gradient(to right, blue, white)"
}, 1000);
});
div {
background: #000;
width: 480px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
h1 {
font-size: 48px;
font-family: arial;
background: linear-gradient(to right, red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
<h1 id="something">Something</h1>
</div>
<input type="button" id="the-button" value="Animate">
您可以在https://codepen.io/KaiZoDa128/pen/WNNOYaZ查看完整代码
提前致谢。
解决方案
我相信您不能为渐变设置动画(至少对于 CSS,我想 jquery 也是如此)。对于简单的颜色测试,只是渐变(即图像)“覆盖”了背景颜色,因此如果您的元素具有渐变并且添加了背景颜色,您将看不到它。
但是你也许可以用 CSS:before
和:after
伪元素来做到这一点。
推荐阅读
- php - 缓存,最佳实践
- android - Kotlin Flow 并行执行两个 API 调用,并在每个结果到达时收集它
- r - 删除包含不同字母或缺少两列数据的行
- sql - 协助多个 WHERE 子句,以允许用户搜索其中一个,而不会在途中互相跺脚
- python - 在python matplotlib中,可以在pyplot.plt命令里面开启图例吗?
- visual-studio - 如何在 Windows 中设置 llvm/clang?
- out-of-memory - 无法在 MLEngineTrainingOperator 中指定 master_type
- odoo - 'DateTime' 没有发生 len(),与 Odoo 和 Zapier 集成
- regex - 使用正则表达式从字符串中提取特定字符串
- css - django tables2 在标题上显示排序箭头