$(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
})
})
第一个
<html><head>
<style type="text/css">
.outer{
width:200px
height:400px
background-color:gray
position:absolute
}
.yellow{
width:80px
height:80px
position:absolute
left:60px
top:160px
background-color:yellow
transition:all 2s ease-in
animation:mymove 3s 1
-webkit-animation:mymove 3s 1
}
@-webkit-keyframes mymove{
0%{
opacity: 0
}
100%{
opacity: 1
}
}
@keyframes twinkling{
0%{
opacity: 0
}
100%{
opacity: 1
}
}
.black{
width:100px
height:100px
position:absolute
bottom:0px
left:0px
background-color:black
}
</style>
</head>
<body>
<div class="outer">
<div class="yellow"></div>
<div class="black"></div>
</div>
</body>
</html>
你好，在CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。
CSS3动画的属性主要分为三类：transform、transition以及animation。
