jquery 怎样让css内容有渐变效果？
//css内容.a{margin-top:300px;height:50px;width:150px;font-size:30px;border-radius:6px;b...
//css内容
.a {
margin-top: 300px;
height: 50px;
width: 150px;
font-size: 30px;
border-radius: 6px;
border-width: 1px;
}
.b {
box-shadow: 0 0 7px #3333cc;
}
//jquery
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").click(function() {
$(this).addClass("b");
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b");
//点击其他地方消除b效果
});
return false;
});
});
怎样让b是逐渐加进去的 最好详细点 展开
.a {
margin-top: 300px;
height: 50px;
width: 150px;
font-size: 30px;
border-radius: 6px;
border-width: 1px;
}
.b {
box-shadow: 0 0 7px #3333cc;
}
//jquery
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").click(function() {
$(this).addClass("b");
//点击text增加b效果
$("body").one("click", function() {
$("input").removeClass("b");
//点击其他地方消除b效果
});
return false;
});
});
怎样让b是逐渐加进去的 最好详细点 展开
展开全部
<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;
});
});
$(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;
});
});
追问
没用的 刚才试过 fadein没有逐渐增加
追答
我修改了一下， 你再看看
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
动态渐变
<span style="font-size:12px;"><html>
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>
为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>
静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
简单解释：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to。
<span style="font-size:12px;"><html>
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>
为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>
静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
简单解释：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用animate函数，你自己查查用法吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
