<!doctype html>transition
<a id="timings-demo-btn" href="#" data-mce-href="#">click</a> <br /><div id="timings-demo"><div id="ease" class="demo-box">Ease</div><div id="ease-in" class="demo-box">Ease-in</div><div id="ease-out" class="demo-box">Ease-out</div><div id="ease-in-out" class="demo-box">Ease-in-out</div><div id="linear" class="demo-box">Linear</div><div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
</div>
点击更新后自动生成的如上，完全乱掉。
textare 和input button的写法如下：
<textare id="con" style="width:100%;height:400px;font-family:Arial;"> </textarea><br/> <input id="btn" type="button" value="运行代码"/>
textarea里面的html如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style type="text/css">
body{ font-family:Arial;}
#timings-demo{
border:solid 1px #ccc;
padding:10px;
height:400px;
width:400px;
}
.demo-box{
width:100px;
height:50px;
text-align:center;
line-height:50px;
color:#fff;
background:#96C;
border-radius:5px;
box-shadow:inset 0 0 5px rgba(102,153,0,0.5);
margin-bottom:10px;
}
/*ease效果*/
#ease{ background:#f36; transition:all 5s ease 0.3s;}
/*ease-in*/
#ease-in{
background:#369;
transition:all 3s ease-in 0.5s;
}
/*ease-out*/
#ease-out{
background:#636;
transition:all 5s ease-out 0s;
}
/*ease-in-out*/
#ease-in-out{
background:#3e6;
transition:all 1s ease-in-out 2s;
}
/*linear*/
#linear{
background:#999;
transition:all 6s linear 0s;
}
/*cubic-bezier*/
#cubic-bezier{
background:#6d6;
transition:all 4s cubic-bezier 1s;
}
/*hover状态下或单击click按钮后demo-box产生属性变化*/
#timing-demo.timings-demo-hover .demo-box,
#timings-demo:hover .demo-box{
transform:rotate(360deg) scale(1.2);
background:#369;
border:solid 1px rgba(255,260,255,08);
border-radius:25px;
margin-left:280px;
height:30px;
line-height:30px;
margin-bottom:15px;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$("timings-demo-btn").ready(function() {
$("#timings-demo-btn").toggle(
function(){
$(this).next("div#timings-demo").addClass("timings-demo-hover");
},function(){
$(this).next("div#timings-demo").removeClass("timings-demo-hover");
}
)
});
</script>
</head>
<body>
<a id="timings-demo-btn" href="#">click</a>
<br/>
<div id="timings-demo">
<div id="ease" class="demo-box">Ease</div>
<div id="ease-in" class="demo-box">Ease-in</div>
<div id="ease-out" class="demo-box">Ease-out</div>
<div id="ease-in-out" class="demo-box">Ease-in-out</div>
<div id="linear" class="demo-box">Linear</div>
<div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
</div>
</body>
</html>
时间： 2024-10-11 15:42:47