最近一直在学习HTML5+CSS3，还是个初学者，搞了半天才搞出个动画，把能记得的CSS3全用了
好像还不会发布...
(⊙o⊙)…
不支持IE系列.................！
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<style type="text/css">
body { font-family:"宋体","微软雅黑";}
.bgt input {
position:absolute;
left:130px;
top:250px;
width:75px;
text-align:center;
}
.beiju {
width:200px;
color:#000;
background:#0F0;
border:1px solid #F00;
padding:20px 0;
text-align:center;
position:absolute;
left:130px;
top:150px;
z-index:98;
-moz-transition:background-color 2s linear, color 2s linear, width 2s linear, left 1s linear, -moz-transform 1s linear,-moz-border-radius 5s linear;/*for firefox*/
-moz-transform:rotate(0deg);/*for firefox*/
-webkit-transition:background-color 2s linear, color 2s linear, width 2s linear, left 1s linear, -webkit-transform 1s linear,-webkit-border-radius 5s linear;/*for safair or Chorme*/
-webkit-transform:rotate(0deg);/*for safair or Chorme*/
-o-transition:background-color 2s linear, color 2s linear, width 2s linear, left 1s linear, -o-transform 1s linear,-o-border-radius 5s linear;/*for opera*/
-o-transform:rotate(0deg);/*for opera*/
}
.beiju2 {
width:450px;
color:#900;
background:#FF0;
font-family:"微软雅黑";
font-size:26px;
font-weight:bold;
border:5px dashed #0F0;
border-radius:50px 15px 20px 100px;
-moz-border-radius:50px 15px 20px 100px;
-webkit-border-radius:50px 15px 20px 100px;
-moz-box-shadow:5px 5px 8px #C90;
-webkit-box-shadow:5px 5px 8px #C90;
box-shadow:5px 5px 8px #C90;
text-shadow:1px 0px 5px #fff;
position:absolute;
left:580px;
z-index:99;
-moz-transform:rotate(710deg);
-webkit-transform:rotate(710deg);
-o-transform:rotate(710deg);
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("#dian").click(function(){
if ($(".beiju").attr("class")=="beiju")
{
$(".beiju").addClass("beiju2");
}
else{
$(".beiju").removeClass("beiju2");
}
});
});
</script>
</head>
<body>
<div class="beiju"> 我是茶壶肥又矮 </div>
<div class="bgt">
<input type="button" value="求被点" id="dian"/>
</div>
</body>
</html>
