<h1>移動(上下)</h1>
<div style="height:100px;">
<div class="box" data-100="top:0px;"
data-300="top:80px;">
</div>
<div class="box" data-100="top:80px;"
data-300="top:0px;">
</div>
<div class="box" data-100="top:0px;"
data-300="top:80px;">
</div>
<div class="box" data-100="top:80px;"
data-300="top:0px;">
</div>
</div>
<h1>透過</h1>
<style>
.opa{
opacity:1;
}
</style>
<div class="box opa"
data-500="opacity:1;"
data-700="opacity:0;" >
</div>
<div class="box opa"
data-500="opacity:0;"
data-700="opacity:1;" >
</div>
<div class="box opa"
data-500="opacity:1;"
data-700="opacity:0;" >
</div>
<div class="box opa"
data-500="opacity:0;"
data-700="opacity:1;" >
</div>
<style>
.box0{
position:relative;
left: 20px;
margin-left:0px;
top: 10px;
width: 100px;
height: 100px;
padding:0px;
background-color: #EEE;
border-radius: 5px;
}
</style>
<h1>影</h1>
<div class="box0" data-700="box-shadow: 0px 0px 0px rgba(0,0,0,0.4);margin-left:0px;top:10px;"
data-900="box-shadow: 10px 10px 10px rgba(0,0,0,0.4);margin-left:-10px;top:0px;">
</div>