gpt4 book ai didi

jquery - CSS(或 JQuery)改变颜色动画 onclick

转载 作者:行者123 更新时间:2023-12-01 07:21:04 26 4
gpt4 key购买 nike

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 3s;
-moz-animation:myfirst 3s; /* Firefox */
-webkit-animation:myfirst 3s; /* Safari and Chrome */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
}


@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
50% {background:#800000;}
100% {background:red;}
}

参见my jsFiddle (不适用于 IE 或 OPERA)。或者参见上面的 CSS。

它是一个简单的彩色动画,从红色变为深红色,然后再变为红色。我需要做到这样,当单击按钮时,它将来自:

蓝色到#000066,然后回到蓝色。

我知道一种方法是创建一个新的样式表并切换样式表,但是,

(1) 我不太确定该怎么做

(2) 在所有这一切的宏伟计划中,我需要使用不同的颜色重复大约 15 次,我不想有 15 个不同的颜色样式表。有 JQuery 或直接的 javascript 方法来执行此操作吗?

最佳答案

无需创建新的样式表。只需为每种颜色创建一个不同的类,然后使用 jQuery .addClass().removeClass() :

function blueMe(){
$('div').removeClass().addClass('blue');
}​

http://jsfiddle.net/mblase75/KHnBz/6/

正如您在该 fiddle 的 CSS 中看到的那样,您需要为每个类创建新的关键帧。

关于jquery - CSS(或 JQuery)改变颜色动画 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13634347/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com