jquery 怎样让css内容有渐变效果?

html-css07

jquery 怎样让css内容有渐变效果?,第1张

<script type="text/javascript">

$(document).ready(function() {

$("input").click(function() {

$(this).hide().fadeIn(700).addClass('b')//当前这个input先隐藏再渐显,你可以测试一下,如果不是你想要的效果,你可以查一下jq的渐隐效果函数或者animate()函数,控制这个input的透明度就好了,例如 $(this).animate(‘opacity’,‘0’);

//点击text增加b效果

$("body").one("click", function() {

$("input").removeClass("b")

//点击其他地方消除b效果

})

return false

})

})

代码如下:<style>

<!--

#glowtext{

filter:glow(color=0000ff,strength=2)

width:100%

}

-->

</style>

<script language="JavaScript1.2">

function glowit(which){

if (document.all.glowtext[which].filters[0].strength==2)

document.all.glowtext[which].filters[0].strength=1

else

document.all.glowtext[which].filters[0].strength=2

}

function glowit2(which){

if (document.all.glowtext.filters[0].strength==2)

document.all.glowtext.filters[0].strength=1

else

document.all.glowtext.filters[0].strength=2

}

function startglowing(){

if (document.all.glowtext&&glowtext.length){

for (I=0I<glowtext.lengthI++)

eval('setInterval("glowit('+I+')",150)')

}

else if (glowtext)

setInterval("glowit2(0)",150)

}

if (document.all)

window.onload=startglowing

</script>

<span id=glowtext><font color=ff0000 face=宋体 style=cursor:hand>哈哈哈哈</font></span>

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

语法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

径向渐变(Radial Gradients)- 由它们的中心定义

语法:background-image: linear-gradient(angle, color-stop1, color-stop2)