h1 元素的动画背景
Animate background of an h1 element
即使包含 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 也是如此)。对于简单的颜色测试,只是渐变,也就是图像,"cover" 背景色,所以如果你的元素有渐变,你添加了背景色,你将看不到它。
但是你可以也许用CSS:before
和:after
伪元素。
即使包含 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 也是如此)。对于简单的颜色测试,只是渐变,也就是图像,"cover" 背景色,所以如果你的元素有渐变,你添加了背景色,你将看不到它。
但是你可以也许用CSS:before
和:after
伪元素。